---
title: Franchise
layout: page
full-width: false
css:
  - /assets/css/hide-heading.css
js:
  - /GameDB/assets/js/item_detail.js
  - /GameDB/assets/js/group_detail.js
ext-css:
  - href: https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200
---

<script>
globalThis.GAMEDB_CONFIG = {
  base_path: "{{ site.baseurl }}"
};
globalThis.GAMEDB_GROUP_TYPE = "franchise";
</script>

<div id="item-loading" class="text-center py-5">
  <output class="spinner-border">
    <span class="visually-hidden">Loading...</span>
  </output>
  <p class="mt-2 text-muted">Loading franchise data…</p>
</div>

<div id="item-error" class="alert alert-danger d-none" role="alert"></div>

<div id="item-content" class="d-none">

  <h1 id="franchise-name" class="mb-2"><span class="visually-hidden">Franchise name loading</span></h1>
  <div class="mb-3">
    <a id="franchise-igdb-link" href="#" target="_blank" rel="noopener" class="btn btn-outline-secondary btn-sm d-none">
      View on IGDB <span class="material-symbols-outlined" style="font-size:1em;vertical-align:middle;">open_in_new</span>
    </a>
  </div>

  <!-- Games -->
  <div id="franchise-games-section" class="d-none mb-5">
    <h3 class="mb-3">Games in this Franchise</h3>
    <div id="franchise-games"></div>
  </div>

</div>

{% include image_modal.html %}