{% extends "base.html" %}
{% block title %}Dwarves — df-storyteller{% endblock %}

{% block content %}
<div style="display: flex; justify-content: space-between; align-items: baseline;">
    <div>
        <h1 class="page-header">Citizens of {{ fortress_name or "the Fortress" }}</h1>
        <p class="page-subtitle">{{ dwarves | length }} souls call this place home</p>
    </div>
    <div style="display: flex; gap: 0.5rem;">
        <a href="/dwarves/relationships" class="btn btn-secondary" style="white-space: nowrap;">Relationship Web</a>
        <a href="/dwarves/religion" class="btn btn-secondary" style="white-space: nowrap;">Pantheon</a>
    </div>
</div>

{% if dwarves %}
<div class="dwarf-grid">
    {% for dwarf in dwarves %}
    <a href="/dwarves/{{ dwarf.unit_id }}" class="dwarf-card" style="text-decoration: none;">
        <div class="dwarf-name">{{ dwarf.name }}{% if dwarf.highlight_role %} <span class="role-badge role-{{ dwarf.highlight_role }}">{{ dwarf.highlight_role }}</span>{% endif %}</div>
        <div class="dwarf-profession">
            {{ dwarf.profession }}{% if dwarf.noble_positions %} &mdash; {{ dwarf.noble_positions | join(', ') }}{% endif %}
            &middot; Age {{ dwarf.age | int }}
        </div>
        {% if dwarf.notable_traits %}
        <div class="dwarf-traits">{{ dwarf.notable_traits }}</div>
        {% endif %}
    </a>
    {% endfor %}
</div>
{% else %}
<div class="parchment">
    <p style="text-align: center; color: var(--ink-faded); font-style: italic;">
        No dwarves found. Run <code>storyteller-begin</code> in DFHack to take a snapshot.
    </p>
</div>
{% endif %}
{% endblock %}