{% extends '.layout.html' %} {% block head %}{% endblock %} {% block body %}
<h1 class="text-2xl font-black text-white">
  Welcome to the Dragon Warrior Monsters 2 App
</h1>
<br />
<label for="familyDropdown">Select Family:</label>
<select id="familyDropdown" class="p-2 bg-gray-900 rounded-md">
  <option value="">All Families</option>
</select>
<br />
<label for="monsterDropdown">Select 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="flex mt-4">

  <div class="p-2 m-2 border-2 rounded-md border-slate-400">
    <div id="monsterNameContainer" class="text-center">
      <!-- Monster name will be displayed here -->
    </div>

    <div id="monsterFamilyContainer" class="mt-1">
      <!-- Monster Family will be displayed here-->
    </div>
    
    <div id="monsterStatsContainer" class="mt-2">
      <!-- Monster stats will be displayed here -->
    </div>
    
    <div id="monsterSkillsContainer" class="mt-2">
      <!-- Monster Skills will be displayed here-->
    </div>
    <div id="monsterLocationContainer" class="mt-2">
      <!-- Monster Location will be displayed here-->
    </div>
  </div>

  <div id="breedingPairsContainer" class="p-2 m-2 border-2 rounded-md border-slate-400">
    <!-- Breeding pairs will be displayed here -->
  </div>

  <div class="grid items-center justify-center grid-cols-1 ml-4">
    <iframe
      id="monsterSpriteIframe"
      src=""
      class="p-2 ml-8 border-2 rounded-md border-slate-400"
      height="200"
      width="200"
    >
    </iframe>
    <iframe
      id="breedingIframe"
      src=""
      class="p-2 mt-4 border-2 rounded-md border-slate-400"
      height="200"
      width="272"
    >
    </iframe>
  </div>
</div>
<div class="mt-4 text-center">
  <a
    href="https://dwm.happytavern.co/skills"
    class="float-left text-2xl font-bold text-purple-400 hover:underline"
    >Go to Skills Data Page</a
  >
</div>


<br /><br />
<div class="mx-auto footer">
  <h2 class="m-2 text-2xl font-bold">About The App</h2>
  <p class="leading-7">
    Dragon Warrior Monsters 2 App, an open-source project where you can explore
    information about monsters, breeding pairs, and more.
  </p>
  <p class="mt-4 leading-7">
    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>
  <div class="mt-4">
    <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>
{% endblock %}