{% extends 'app.html' %} {% block head %}{% endblock %} {% block body %}
<h1 class="text-2xl font-black text-white">
  Welcome to the Dragon Warrior Monsters 2 App
</h1>
<div>
  <label for="familyDropdown">Select Family:</label>
  <select id="familyDropdown" class="p-2 rounded-md bg-slate-800">
    <option value="">All Families</option>
  </select>

  <label for="monsterDropdown">Select Monster:</label>
  <select
    id="monsterDropdown"
    class="p-2 rounded-md bg-slate-800"
    onchange="updateMonsterSprite()"
  >
    <option value="">All Monsters</option>
  </select>
  <div id="modules" class="flex mt-4">
    <iframe
      id="monsterIframe"
      src=""
      class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
      height="456"
      width="272"
    >
    </iframe>
    <div class="grid items-center justify-center grid-cols-1 ml-4">
      <iframe
        id="monsterSpriteIframe"
        src=""
        class="p-2 ml-8 border-2 border-teal-500 rounded-md"
        height="200"
        width="200"
      >
      </iframe>
      <iframe
        id="breedingIframe"
        src=""
        class="p-2 mt-4 border-2 border-teal-500 rounded-md"
        height="200"
        width="272"
      >
      </iframe>
    </div>
  </div>
  <iframe
    id="footerIframe"
    src="https://dwm.happytavern.co/footer"
    class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
    height="240"
    width="800"
  >
  </iframe>
</div>
{% for file in js_files %}
<script src="{{ url_for('static', filename='js/' + file) }}"></script>
{% endfor %} {% endblock %}