{% extends "bases/main_base.html" %}

{% block title %}Admin Panel — Dashboard{% endblock %}

{% block body %}
<div class="container-fluid vh-100">
  <div class="row vh-100 align-items-center justify-content-center">
    
    <div class="col-12 col-md-6">
      <div class="card w-400 mw-full mx-auto" style="padding: 20px;">

        <h5 class="card-title text-center">Create Character</h5>

        <form action="" method="POST">
          <div class="form-group">
            <label for="text-input" class="required">Name</label>
            <input type="text" class="form-control mb-4" id="character_name" name="character_name" placeholder="Name your Character" required >
          </div>

          <div class="form-group">
            <label for="race_dropdown">Choose Race</label>
            <select class="form-control mb-4" id="race_dropdown" name="race_dropdown" required >
              <option value="" disabled selected>Select a Race...</option>
              <option value="avaline">Avaline - Divine, Strong, Intelligent</option>
              <option value="beastfolk">Beastfolk - Half Beast, Half Terran</option>
              <option value="draconian">Draconian - Half Dragon, Half Terran</option>
              <option value="dwarf">Dwarf - Stout, Strong, Short</option>
              <option value="elf">Elf - Tall, Slender, Agile</option>
              <option value="hellion">Hellion - Dark, Shadowy Humanoid</option>
              <option value="terran">Terran - Some call them Human.</option>
              <option value="vorgath">Vorgath - Monstrous Evil Humanoid</option>
            </select>
          </div>

          <div class="form-group">
            <label for="profession_dropdown">Choose Profession</label>
            <select class="form-control mb-4" id="profession_dropdown" name="profession_dropdown" required >
              <option value="" disabled selected>Select a Profession...</option>
              <option value="archanist">Archanist - Magic</option>
              <option value="assassin">Assassin - Physical</option>
              <option value="bloodborn">Bloodborn - Physical</option>
              <option value="cleric">Cleric - Magic</option>
              <option value="guardian">Guardian - Physical</option>
              <option value="hexist">Hexist - Magic</option>
              <option value="ranger">Ranger - Physical</option>
              <option value="warlock">Warlock - Magic</option>
            </select>
          </div>

          <div class="form-group">
            <label for="origin_story">Origin Story</label>
            <textarea class="form-control mb-4" id="origin_story" name="origin_story" rows="10" cols="40" required >{{data.starter_text}}</textarea>
          </div>

          <button type="submit" class="btn btn-primary btn-block">
            Submit
          </button>
        </form>
      </div>
      
    </div>

    <div id="text_holder" class="col-12 col-md-6">
      <p>
        To start playing, we need to help you create your unique character. 
      </p>

      <p>The following fields are required:</p>
      <ul>
        <li>Name: This is your character's identity in the game.</li>
        <li>Race: Choose from our selection of options.</li>
        <li>Profession: Select from our list of profession (commonly called classes).</li>
        <li>Origin Story: This section is optional, but can provide additional context for your character.</li>
      </ul>
    </div>

    

  </div>
</div>

{% endblock %}


{% block scripts %}
<script>
  // Reference to the dropdown and image
  const racedropdown = document.getElementById('race_dropdown');
  const profdropdown = document.getElementById('profession_dropdown');
  const contentArea = document.getElementById('text_holder');

  racedropdown.addEventListener('change', async function () {
    const value = this.value;

    const url = `/ajax/races?race=${value}`; 

    try {
      // Fetch HTML fragment from the server
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const html = await response.text();

      // Replace existing content
      contentArea.innerHTML = html;
    } catch (err) {
      console.error("Error loading content:", err);
      contentArea.innerHTML = `
        <div class="alert alert-danger">
          Failed to load content. Please try again.
        </div>`;
    }
  });

  profdropdown.addEventListener('change', async function () {
    const value = this.value;

    const url = `/ajax/prof?prof=${value}`;  

    try {
      // Fetch HTML fragment from the server
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const html = await response.text();

      // Replace existing content
      contentArea.innerHTML = html;
    } catch (err) {
      console.error("Error loading content:", err);
      contentArea.innerHTML = `
        <div class="alert alert-danger">
          Failed to load content. Please try again.
        </div>`;
    }
  });
</script>
{% endblock %}