{# templates/adminpanel/dashboard.html #}
{% extends "adminpanel/base.html" %}

{% block pagetitle %}Dashboard{% endblock %}
{% block page_header %}Dashboard{% endblock %}
{% block header_actions %}
  <div class="d-flex align-items-center gap-2">
    <a class="btn btn-primary btn-sm" href="{% url 'admin_products' %}">Manage products</a>
    <a class="btn btn-light btn-sm" href="{% url 'admin_categories' %}">Manage categories</a>
    <a class="btn btn-outline-secondary btn-sm" href="/dj-admin/">Django Admin</a>
  </div>
{% endblock %}

{% block content %}
<div lang="en" dir="ltr">
  <!-- KPIs -->
  <div class="row g-3">
    <div class="col-12 col-md-4">
      <div class="mm-soft-card p-3 h-100">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small mb-1">Categories</div>
            <div class="display-6 fw-bold">{{ stats.categories|default:"0" }}</div>
          </div>
          <div aria-hidden="true" class="text-warning">
            <!-- folder icon -->
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
              <path d="M3 7h5l2 2h11v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <div class="mm-soft-card p-3 h-100">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small mb-1">Products</div>
            <div class="display-6 fw-bold">{{ stats.products|default:"0" }}</div>
          </div>
          <div aria-hidden="true" class="text-primary">
            <!-- box icon -->
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
              <path d="M3 7l9 5 9-5M3 7l9-4 9 4M3 7v10l9 4 9-4V7" stroke="currentColor" stroke-width="2"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-4">
      <div class="mm-soft-card p-3 h-100">
        <div class="d-flex justify-content-between align-items-center">
          <div>
            <div class="text-muted small mb-1">In-stock items</div>
            <div class="display-6 fw-bold">{{ stats.in_stock|default:"0" }}</div>
          </div>
          <div aria-hidden="true" class="text-success">
            <!-- check-circle icon -->
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none">
              <path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z" stroke="currentColor" stroke-width="2"/>
              <path d="M8 12l3 3 5-6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Quick actions -->
  <div class="d-flex flex-wrap gap-2 mt-4">
    <a class="btn btn-primary" href="{% url 'admin_products' %}">Manage products</a>
    <a class="btn btn-outline-primary" href="{% url 'admin_categories' %}">Manage categories</a>
    <a class="btn btn-outline-secondary" href="/dj-admin/">Django Admin</a>
  </div>
</div>
{% endblock %}