{% extends 'backlogger/base.html' %}

{% block title %}Live — Kill My Backlog{% endblock %}

{% block styles %}
<style>
  .container { max-width: 720px; margin: 0 auto; padding: 2rem; }

  .top-bar { margin-bottom: 2rem; }
  .top-bar h1 { font-size: 1.75rem; letter-spacing: -0.03em; }
  .top-bar p { color: #64748b; font-size: 0.85rem; margin-top: 0.35rem; }

  .live-list { display: flex; flex-direction: column; gap: 0.75rem; }

  .live-item {
    background: #0a0f1e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .live-rank {
    font-size: 0.75rem;
    color: #334155;
    font-variant-numeric: tabular-nums;
    width: 1.5rem;
    flex-shrink: 0;
    text-align: right;
  }
  .live-body { flex: 1; min-width: 0; }
  .live-name {
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.4rem;
  }
  .live-meta { display: flex; align-items: center; gap: 0.6rem; }
  .badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.18rem 0.45rem; border-radius: 4px; }
  .badge-games { background: #3b2f6a; color: #a78bfa; }
  .badge-books { background: #064e3b; color: #34d399; }
  .badge-films { background: #431407; color: #fb923c; }
  .badge-other { background: #1e293b; color: #94a3b8; }
  .live-stat { font-size: 0.78rem; color: #64748b; }

  .progress-bar { height: 3px; background: #1e293b; border-radius: 2px; margin-top: 0.5rem; }
  .progress-fill { height: 100%; background: #38bdf8; border-radius: 2px; }

  .live-time { font-size: 0.75rem; color: #334155; flex-shrink: 0; white-space: nowrap; }

  .empty { text-align: center; padding: 5rem 2rem; color: #64748b; }
  .empty a { color: #38bdf8; }

  body[data-theme="light"] .live-item { background: #ffffff; border-color: #e2e8f0; }
  body[data-theme="light"] .progress-bar { background: #e2e8f0; }
  body[data-theme="light"] .progress-fill { background: #0284c7; }
  body[data-theme="light"] .live-time { color: #94a3b8; }
  body[data-theme="light"] .live-rank { color: #94a3b8; }
</style>
{% endblock %}

{% block nav %}
<a href="{% url 'backlogger:profile' %}">{{ request.user.profile.display_name|default:request.user.username }}</a>
<form method="post" action="{% url 'logout' %}" style="display:inline">{% csrf_token %}<button type="submit" style="background:none;border:none;color:#64748b;font-size:0.85rem;cursor:pointer;padding:0">Log out</button></form>
{% endblock %}

{% block content %}
<div class="container">
  <div class="top-bar">
    <h1>Live</h1>
    <p>Your 10 most recently touched items.</p>
  </div>

  {% if items %}
  <div class="live-list">
    {% for item in items %}
    <div class="live-item">
      <div class="live-rank">{{ forloop.counter }}</div>
      <div class="live-body">
        <div class="live-name" title="{{ item.name }}">{{ item.name }}</div>
        <div class="live-meta">
          <span class="badge badge-{{ item.category }}">{{ item.get_category_display }}</span>
          <span class="live-stat">
            {% if item.category == 'games' %}
              {% if item.hours_played is not None %}{{ item.hours_played|floatformat:1 }}h{% endif %}
            {% elif item.category == 'books' %}
              {% if item.pages_read is not None %}p. {{ item.pages_read }}{% if item.total_pages %}/{{ item.total_pages }}{% endif %}{% endif %}
            {% elif item.category == 'films' %}
              {% if item.watched %}watched{% else %}not watched{% endif %}
            {% endif %}
          </span>
          <span class="live-stat">{{ item.get_status_display }}</span>
        </div>
        <div class="progress-bar">
          <div class="progress-fill" style="width: {{ item.progress_percent }}%"></div>
        </div>
      </div>
      <a href="{% url 'backlogger:edit' item.pk %}" class="live-time">{{ item.updated_at|date:"M j" }}</a>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty">
    Nothing here yet. <a href="{% url 'backlogger:add' %}">Add your first item.</a>
  </div>
  {% endif %}
</div>
{% endblock %}