{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block content %}
<main class="container">
  <div class="page-head split-head">
    <div>
      <h1>{{ character.name }}</h1>
      <p class="muted">Происхождение: {{ character.get_background_display }}</p>
    </div>
    <div class="head-actions">
      <a class="btn btn-outline-light" href="{% url 'story' %}">Продолжить сюжет</a>
      <a class="btn btn-outline-light" href="{% url 'inventory' %}">Инвентарь</a>
    </div>
  </div>

  <section class="profile-grid">
    <div class="glass-card">
      <h3>Характеристики</h3>
      <div class="stat-grid">
        <div>
          <p class="stat-label">Уровень</p>
          <p class="stat-value">Lv {{ character.level }}</p>
        </div>
        <div>
          <p class="stat-label">Ви́гор</p>
          <p class="stat-value">{{ character.vigor }}</p>
        </div>
        <div>
          <p class="stat-label">Фокус</p>
          <p class="stat-value">{{ character.focus }}</p>
        </div>
        <div>
          <p class="stat-label">Алхимия</p>
          <p class="stat-value">{{ character.alchemy }}</p>
        </div>
        <div>
          <p class="stat-label">Перки</p>
          <p class="stat-value">{{ character.perk_points }}</p>
        </div>
      </div>
      <p class="muted">Откройте ветки перков в следующих итерациях.</p>
    </div>
    <div class="glass-card">
      <h3>Экипировка</h3>
      {% if equipped %}
      <ul class="info-list">
        {% for entry in equipped %}
        <li>
          <span>{{ entry.item.name }}</span>
          <span class="badge bg-dark-subtle text-light">{{ entry.item.get_slot_display }}</span>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="muted">Экипировка пока не выбрана.</p>
      {% endif %}
      <a class="text-link" href="{% url 'inventory' %}">Управлять лутом →</a>
    </div>
    <div class="glass-card">
      <h3>Последние решения</h3>
      {% if recent_entries %}
      <ul class="timeline">
        {% for entry in recent_entries %}
        <li>
          <span class="timeline-title">{{ entry.scene.title }}</span>
          <span class="timeline-meta">{{ entry.choice_text }}</span>
          <span class="badge badge-outcome badge-{{ entry.outcome }}">{{ entry.get_outcome_display }}</span>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="muted">Вы ещё не сделали выборов. Начните пролог.</p>
      {% endif %}
    </div>
  </section>
</main>
{% endblock %}