{% load static %}
<!DOCTYPE html>
<html>
<head>
  <title>D&D 5e Full Character Sheet</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{% static 'css/uikit.min.css' %}">
  <style>
    body { background: #f4f4f4; }
    .sheet {
      max-width: 980px;
      margin: 2rem auto;
    }
    .uk-card {
      margin-bottom: 1.5rem;
      overflow: visible;
    }
    .uk-table th, .uk-table td { text-align: center; }
    .dice { font-family:monospace; }
    .uk-label { margin-right: 0.2em; }
    .quickfacts label { font-weight: bold; margin-right: 0.25em; }
    .info-table-card { overflow-x: auto; }
    .uk-table { margin-bottom: 0; }
    .uk-table th, .uk-table td { text-align: center; }
    .dice { font-family:monospace; }
    .uk-label { margin-right: 0.2em; }
    .quickfacts label { font-weight: bold; margin-right: 0.25em; }
    .info-table-card { overflow-x: auto; }
    .uk-table { margin-bottom: 0; }
  </style>
</head>
<body>
<div class="sheet">
  <!-- Main Header -->
  <div class="uk-card uk-card-default uk-card-body">
    <h1 class="uk-text-center uk-margin-remove-bottom">
      <span uk-icon="users"></span> {{ character.name }}
      <span class="uk-text-meta uk-margin-small-left">Level {{ character.level }}</span>
    </h1>
    <hr class="uk-divider-icon uk-margin-small-top uk-margin-bottom">
    <div class="uk-grid-small uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
      <div><label>Race:</label> {{ character.race }} {{ character.subrace }}</div>
      <div><label>Class:</label> {{ character.char_class.package_name }} {{ character.subclass }}</div>
      <div><label>Background:</label> {{ character.background }}</div>
      <div><label>Alignment:</label> {{ character.alignment }}</div>
      <div><label>Size:</label> {{ character.size }}</div>
      <div><label>Age:</label> {{ character.age }}</div>
      <div><label>Gender:</label> {{ character.gender }}</div>
      <div><label>Height:</label> {{ character.height }}</div>
      <div><label>Weight:</label> {{ character.weight }} lbs</div>
      <div><label>Deity:</label> {{ character.deity }}</div>
      <div><label>XP:</label> {{ character.experience }}</div>
      <div>
        <label>Inspiration:</label>
        {% if character.inspiration %}
          <span class="uk-label uk-label-warning" uk-icon="star"> {{ character.inspiration }}</span>
        {% else %}
          <span class="uk-text-muted">—</span>
        {% endif %}
      </div>
    </div>
  </div>
  <!-- Core Attrs: Full-width Card to prevent table overflows -->
  <div class="uk-card uk-card-default uk-card-body info-table-card">
    <h3 class="uk-card-title"><span uk-icon="settings"></span> Core Attributes</h3>
    <div style="overflow-x:auto;">
      <table class="uk-table uk-table-divider uk-table-small uk-table-striped uk-table-hover">
        <thead>
          <tr><th></th><th>Score</th><th>Modifier</th><th>Save</th></tr>
        </thead>
        <tbody>
        <tr><th>STR</th><td>{{ character.strength }}</td><td>{{ character.strength_modifier }}</td><td>{{ character.strength_save }}</td></tr>
        <tr><th>DEX</th><td>{{ character.dexterity }}</td><td>{{ character.dexterity_modifier }}</td><td>{{ character.dexterity_save }}</td></tr>
        <tr><th>CON</th><td>{{ character.constitution }}</td><td>{{ character.constitution_modifier }}</td><td>{{ character.constitution_save }}</td></tr>
        <tr><th>INT</th><td>{{ character.intelligence }}</td><td>{{ character.intelligence_modifier }}</td><td>{{ character.intelligence_save }}</td></tr>
        <tr><th>WIS</th><td>{{ character.wisdom }}</td><td>{{ character.wisdom_modifier }}</td><td>{{ character.wisdom_save }}</td></tr>
        <tr><th>CHA</th><td>{{ character.charisma }}</td><td>{{ character.charisma_modifier }}</td><td>{{ character.charisma_save }}</td></tr>
        <tr><th>Armor</th><td>{{ character.armor_base }}</td><td>-</td><td>-</td></tr>
        </tbody>
      </table>
    </div>
    <div class="uk-margin uk-child-width-1-3@m" uk-grid>
      <div><span class="uk-label">Proficiency</span> {{ character.proficiency }}</div>
      <div><span class="uk-label">Initiative</span> {{ character.initiative }}</div>
      <div><span class="uk-label">Speed</span> {{ character.speed_base }} {% if character.speed_type %}<span class="uk-text-meta">({{ character.speed_type|join:', ' }})</span>{% endif %}</div>
    </div>
  </div>
  <!-- Secondary Info Cards Grouped in a Responsive Grid -->
  <div class="uk-grid-match uk-child-width-1-2@s uk-child-width-1-3@m uk-margin-bottom" uk-grid>
    <div>
      <div class="uk-card uk-card-small uk-card-default uk-card-body">
        <h3 class="uk-card-title"><span uk-icon="lifesaver"></span> HP & Status</h3>
        <ul class="uk-list uk-list-small">
          <li><span class="uk-label uk-label-danger">HP</span> {{ character.hp }} / {{ character.hp_max }} {% if character.hp_temp %}(+{{ character.hp_temp }} temp){% endif %}</li>
          <li><span class="uk-label">Hit Die</span> <span class="dice">{{ character.hit_die }}</span></li>
          <li><span class="uk-label">Death Saves</span> {{ character.deathsaves_successes }}&#10003;/{{ character.deathsaves_failures }}&#10007;</li>
          <li><span class="uk-label">Exhaustion</span> {% if character.exhaustion_level > 0 %}<span class="uk-label uk-label-warning">{{ character.exhaustion_level }}</span>{% else %}<span class="uk-text-muted">0</span>{% endif %}</li>
          <li><span class="uk-label">Active Conditions</span> {% for cond in character.conditions_active %}{{ cond }}{% if not forloop.last %}, {% endif %}{% empty %}<span class="uk-text-muted">None</span>{% endfor %}</li>
        </ul>
      </div>
    </div>
    <div>
      <div class="uk-card uk-card-small uk-card-default uk-card-body">
        <h3 class="uk-card-title"><span uk-icon="heart"></span> Resistances & Immunities</h3>
        <ul class="uk-list uk-list-striped uk-list-small">
          <li><b>Immunities:</b> {% for i in character.immunities %}{{ i }}{% if not forloop.last %}, {% endif %}{% empty %}<span class="uk-text-muted">None</span>{% endfor %}</li>
          <li><b>Vulnerabilities:</b> {% for v in character.vulnerabilities %}{{ v }}{% if not forloop.last %}, {% endif %}{% empty %}<span class="uk-text-muted">None</span>{% endfor %}</li>
          <li><b>Resistances:</b>
                {% if character.fire_resistance %}Fire {% endif %}
                {% if character.poison_resistance %}Poison {% endif %}
                {% if character.psychic_resistance %}Psychic {% endif %}
                {% if character.cold_resistance %}Cold {% endif %}
                {% if character.thunder_resistance %}Thunder {% endif %}
                {% if character.acid_resistance %}Acid {% endif %}
                {% if character.force_resistance %}Force {% endif %}
                {% if character.radiant_resistance %}Radiant {% endif %}
                {% if character.necrotic_resistance %}Necrotic {% endif %}
                {% if character.bludgeoning_resistance %}Bludgeoning {% endif %}
                {% if character.piercing_resistance %}Piercing {% endif %}
                {% if character.slashing_resistance %}Slashing {% endif %}
                {% if not character.fire_resistance and not character.poison_resistance and not character.psychic_resistance and not character.cold_resistance and not character.thunder_resistance and not character.acid_resistance and not character.force_resistance and not character.radiant_resistance and not character.necrotic_resistance and not character.bludgeoning_resistance and not character.piercing_resistance and not character.slashing_resistance %}
                    <span class="uk-text-muted">None</span>
                {% endif %}
          </li>
        </ul>
      </div>
    </div>
    <div>
      <div class="uk-card uk-card-small uk-card-default uk-card-body">
        <h3 class="uk-card-title"><span uk-icon="search"></span> Senses</h3>
        <ul class="uk-list uk-list-bullet uk-list-small">
          <li>Darkvision: <span class="uk-badge">{{ character.darkvision }}</span></li>
          <li>Blindsight: <span class="uk-badge">{{ character.blindsight }}</span></li>
          <li>Tremorsense: <span class="uk-badge">{{ character.tremorsense }}</span></li>
          <li>Truesight: <span class="uk-badge">{{ character.truesight }}</span></li>
        </ul>
      </div>
    </div>
    <div>
      <div class="uk-card uk-card-small uk-card-default uk-card-body">
        <h3 class="uk-card-title"><span uk-icon="future"></span> Proficiencies & Languages</h3>
        <ul class="uk-list uk-list-bullet uk-list-small">
          <li><span class="uk-label">Armor:</span> {% for i in character.proficiencies_armor %}{{ i }}{% if not forloop.last %}, {% endif %}{% empty %}<span class="uk-text-muted">None</span>{% endfor %}</li>
          <li><span class="uk-label">Weapons:</span> {% for i in character.proficiencies_weapons %}{{ i }}{% if not forloop.last %}, {% endif %}{% empty %}<span class="uk-text-muted">None</span>{% endfor %}</li>
          <li><span class="uk-label">Tools:</span> {% for i in character.proficiencies_tools %}{{ i }}{% if not forloop.last %}, {% endif %}{% empty %}<span class="uk-text-muted">None</span>{% endfor %}</li>
          <li><span class="uk-label">Languages:</span> {% for i in character.languages %}{{ i }}{% if not forloop.last %}, {% endif %}{% empty %}<span class="uk-text-muted">None</span>{% endfor %}</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Main Section Tabs With Switchers -->
  <div class="uk-card uk-card-default uk-card-body">
    <ul class="uk-tab uk-child-width-expand uk-margin-remove-bottom" uk-tab>
      <li class="uk-active"><a href="#">Skills</a></li>
      <li><a href="#">Spellcasting</a></li>
      <li><a href="#">Equipment & Wealth</a></li>
      <li><a href="#">Features, Traits & Backstory</a></li>
    </ul>
    <ul class="uk-switcher uk-margin">
      <li>
        <h3><span uk-icon="bolt"></span> Skills</h3>
        <div style="overflow-x:auto;">
        <table class="uk-table uk-table-small uk-table-hover uk-table-divider">
          <tr><th>Skill</th><th>Bonus</th><th>Passive</th></tr>
          <tr><td>Athletics</td><td>{{ character.athletics }}</td><td>{{ character.athletics_passive }}</td></tr>
          <tr><td>Acrobatics</td><td>{{ character.acrobatics }}</td><td>{{ character.acrobatics_passive }}</td></tr>
          <tr><td>Sleight of Hand</td><td>{{ character.sleight_of_hand }}</td><td>{{ character.sleight_of_hand_passive }}</td></tr>
          <tr><td>Stealth</td><td>{{ character.stealth }}</td><td>{{ character.stealth_passive }}</td></tr>
          <tr><td>Arcana</td><td>{{ character.arcana }}</td><td>{{ character.arcana_passive }}</td></tr>
          <tr><td>History</td><td>{{ character.history }}</td><td>{{ character.history_passive }}</td></tr>
          <tr><td>Investigation</td><td>{{ character.investigation }}</td><td>{{ character.investigation_passive }}</td></tr>
          <tr><td>Nature</td><td>{{ character.nature }}</td><td>{{ character.nature_passive }}</td></tr>
          <tr><td>Religion</td><td>{{ character.religion }}</td><td>{{ character.religion_passive }}</td></tr>
          <tr><td>Animal Handling</td><td>{{ character.animal_handling }}</td><td>{{ character.animal_handling_passive }}</td></tr>
          <tr><td>Insight</td><td>{{ character.insight }}</td><td>{{ character.insight_passive }}</td></tr>
          <tr><td>Medicine</td><td>{{ character.medicine }}</td><td>{{ character.medicine_passive }}</td></tr>
          <tr><td>Perception</td><td>{{ character.perception }}</td><td>{{ character.perception_passive }}</td></tr>
          <tr><td>Survival</td><td>{{ character.survival }}</td><td>{{ character.survival_passive }}</td></tr>
          <tr><td>Deception</td><td>{{ character.deception }}</td><td>{{ character.deception_passive }}</td></tr>
          <tr><td>Intimidation</td><td>{{ character.intimidation }}</td><td>{{ character.intimidation_passive }}</td></tr>
          <tr><td>Performance</td><td>{{ character.performance }}</td><td>{{ character.performance_passive }}</td></tr>
          <tr><td>Persuasion</td><td>{{ character.persuasion }}</td><td>{{ character.persuasion_passive }}</td></tr>
        </table>
        </div>
        <div class="uk-child-width-1-3@m uk-margin" uk-grid>
          <div><span class="uk-label">Passive Perception</span> {{ character.passive_perception }}</div>
          <div><span class="uk-label">Passive Investigation</span> {{ character.passive_investigation }}</div>
          <div><span class="uk-label">Passive Insight</span> {{ character.passive_insight }}</div>
        </div>
      </li>
      <li>
        <h3><span uk-icon="nut"></span> Spellcasting</h3>
        <div class="uk-child-width-1-2@m" uk-grid>
          <div>
            <span class="uk-label">Spellcasting Class:</span> {{ character.spellcasting_class }}<br>
            <span class="uk-label">Ability:</span> {{ character.spellcasting_ability }}<br>
            <span class="uk-label">Spell Save DC:</span> {{ character.spell_save_dc }}<br>
            <span class="uk-label">Spell Attack Bonus:</span> {{ character.spell_attack_bonus }}
          </div>
          <div>
            <span class="uk-label">Spell Slots:</span><br>
            {% for lvl, slots in character.spell_slots.items %}Level {{ lvl }}: {{ slots }}{% if not forloop.last %} | {% endif %}{% empty %}None{% endfor %}<br>
            <span class="uk-label">Cantrips:</span> {% for spell in character.cantrips %}{{ spell }}{% if not forloop.last %}, {% endif %}{% empty %}None{% endfor %}
          </div>
        </div>
        <hr>
        <div class="uk-child-width-1-2@m" uk-grid>
          <div>
            <label>Known Spells:</label>
            <ul class="uk-list uk-list-collapse">{% for spell in character.known_spells %}<li>{{ spell }}</li>{% empty %}<li>None</li>{% endfor %}</ul>
          </div>
          <div>
            <label>Prepared Spells:</label>
            <ul class="uk-list uk-list-collapse">{% for spell in character.prepared_spells %}<li>{{ spell }}</li>{% empty %}<li>None</li>{% endfor %}</ul>
          </div>
        </div>
      </li>
      <li>
        <h3><span uk-icon="bag"></span> Equipment & Wealth</h3>
        <div class="uk-child-width-1-2@m" uk-grid>
          <div>
            <span class="uk-label uk-label-warning">CP</span> {{ character.cp }}
            <span class="uk-label uk-label-secondary">SP</span> {{ character.sp }}
            <span class="uk-label uk-label-success">EP</span> {{ character.ep }}
            <span class="uk-label uk-label-danger">GP</span> {{ character.gp }}
            <span class="uk-label uk-label-primary">PP</span> {{ character.pp }}
          </div>
          <div>
            <span class="uk-label">Equipment:</span>
            <ul class="uk-list uk-list-bullet">{% for eq in character.equipment %}<li>{{ eq }}</li>{% empty %}<li>None</li>{% endfor %}</ul>
          </div>
        </div>
      </li>
      <li>
        <h3><span uk-icon="info"></span> Features, Traits & Backstory</h3>
        <div class="uk-grid uk-child-width-1-2@m" uk-grid>
          <div>
            <span class="uk-label">Traits:</span>
            <ul class="uk-list uk-list-collapse">{% for val in character.traits %}<li>{{ val }}</li>{% endfor %}</ul>
            <span class="uk-label">Personality Traits:</span>
            <ul class="uk-list uk-list-collapse">{% for val in character.personality_traits %}<li>{{ val }}</li>{% endfor %}</ul>
          </div>
          <div>
            <span class="uk-label">Ideals:</span>
            <ul class="uk-list uk-list-collapse">{% for val in character.ideals %}<li>{{ val }}</li>{% endfor %}</ul>
            <span class="uk-label">Bonds:</span>
            <ul class="uk-list uk-list-collapse">{% for val in character.bonds %}<li>{{ val }}</li>{% endfor %}</ul>
            <span class="uk-label">Flaws:</span>
            <ul class="uk-list uk-list-collapse">{% for val in character.flaws %}<li>{{ val }}</li>{% endfor %}</ul>
          </div>
        </div>
        <div><span class="uk-label">Notes:</span><br>{{ character.notes }}</div>
        <div class="uk-margin-small-top"><span class="uk-label">Custom Attributes:</span> {% for k,v in character.custom_attributes.items %}{{ k }}: {{ v }}{% if not forloop.last %}, {% endif %}{% empty %}None{% endfor %}
        </div>
      </li>
    </ul>
  </div>
  <div class="uk-card uk-card-default uk-card-body">
    <ul class="uk-tab uk-child-width-expand uk-margin-remove-bottom" uk-tab>
      <li class="uk-active"><a href="#">Class Features</a></li>
      <li class="uk-active"><a href="#">Background Features</a></li>
      <li class="uk-active"><a href="#">Race Features</a></li>
      <li class="uk-active"><a href="#">Features</a></li>
    </ul>
    <ul class="uk-switcher uk-margin">
      <li>
        <div uk-grid>
          <div class="uk-width-1-1">
            <ul class="uk-accordion-default" uk-accordion="multiple: true">
            {% for val in character.char_class.display_features.all %}
              {% if val.priority <= character.level %}
              <li>
                <a class="uk-accordion-title" href>{{ val.feature.feature_name }} (Level {{val.priority}})</a>
                <div class="uk-accordion-content">
                    <p>{{ val.feature.feature_description|safe }}</p>
                </div>
              </li>
              {% endif %}
            {% endfor %}
            </ul>
          </div>
        </div>
      </li>
    </ul> 
</div>
<script src="{% static 'js/uikit.min.js' %}"></script>
<script src="{% static 'js/uikit-icons.min.js' %}"></script>
</body>
</html>
