{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<h1 class="text-2xl font-black text-white">Dragon Warrior Monsters 2 App</h1>
<br />
<label for="familyDropdown">Family:</label>
<select id="familyDropdown" class="p-2 bg-gray-900 rounded-md">
  <option value="">All Families</option>
</select>
<br />
<label for="monsterDropdown">Monster:</label>
<select
  id="monsterDropdown"
  class="p-2 mt-2 rounded-md bg-slate-900"
  onchange="updateMonsterSprite()"
>
  <option value="">All Monsters</option>
</select>

<br />

<div
  id="modules"
  class="mt-4 mx-auto justify-center items-center flex flex-col"
>
  <div id="monsterNameContainer" class="text-center">
    <!-- Monster name will be displayed here -->
  </div>
  <iframe
    id="monsterSpriteIframe"
    src=""
    class="p-2 m-2 border-2 rounded-md border-slate-400"
    height="200"
    width="200"
  >
  </iframe>

  <div
    class="p-2 mt-2 border-2 rounded-md border-slate-400 w-full max-w-xs container"
  >
    <div id="monsterFamilyContainer" class="mt-1">
      <!-- Monster Family will be displayed here-->
    </div>

    <div id="monsterStatsContainer" class="container mt-2">
      <!-- Monster stats will be displayed here -->
    </div>

    <div id="monsterSkillsContainer" class="container mt-2">
      <!-- Monster Skills will be displayed here-->
    </div>
    <div id="monsterLocationContainer" class="container mt-2">
      <!-- Monster Location will be displayed here-->
    </div>
  </div>

  <div class="flex m-2 w-full max-w-xl gap-2">
    <div
      id="breedingPairsContainer"
      class="p-2 border-2 rounded-md border-slate-400 w-full container"
    >
      <!-- Breeding pairs will be displayed here -->
    </div>

    <div
      id="offspringContainer"
      class="p-2 border-2 rounded-md border-slate-400 w-full container"
    ></div>
  </div>
  <div class="mt-4 text-center">
    <a
      href="/skills"
      class="float-left text-2xl font-bold text-purple-400 hover:underline"
      >Go to Skills Data Page</a
    >
  </div>
  <br />
  <div class="w-auto max-w-xl text-center">
    <h2 class="m-2 text-xl font-bold">About The App</h2>
    <p class="text-md">
      Dragon Warrior Monsters 2 App, an open-source project. You can contribute
      to the development and improvement of this app on our Git repository. Feel
      free to explore the code, report issues, and submit pull requests.
    </p>
    <p class="mt-4 leading-7"></p>
    <div class="mt-4 text-md">
      <a
        href="https://git.happytavern.co/oceanslim/dwm-app"
        target="_blank"
        class="text-purple-400 hover:text-purple-200 hover:underline"
      >
        View the git repository
      </a>
    </div>
  </div>
</div>

<br />
{% endblock %}