{% extends "cabinet/base_cabinet.html" %}

{% block title %}{{ user.full_name }}{% endblock %}

{% block sidebar_nav %}
<li>
  <a href="{% url 'cabinet:dashboard' %}"
     class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2"
     style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-grid fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Дашборд</span>
  </a>
</li>
<li>
  <a href="{% url 'cabinet:users' %}"
     class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 cab-nav__item--active"
     style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-people fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Пользователи</span>
  </a>
</li>
{% endblock %}

{% block cabinet_content %}

<div class="d-flex align-items-center gap-2 mb-4">
  <a href="{% url 'cabinet:users' %}" class="btn btn-sm btn-outline-secondary">
    <span class="bi bi-arrow-left"></span>
  </a>
  <h1 class="h5 mb-0 fw-semibold">{{ user.full_name }}</h1>
  {% if user.is_active %}
    <span class="badge" style="background:#dcfce7;color:#16a34a;">Активен</span>
  {% else %}
    <span class="badge" style="background:#f1f5f9;color:#94a3b8;">Неактивен</span>
  {% endif %}
</div>

<div class="row g-3">

  {# Contact info card #}
  <div class="col-lg-4">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <h6 class="text-muted text-uppercase mb-3" style="font-size:.7rem;letter-spacing:.06em;">Контакты</h6>

        <div class="d-flex align-items-center gap-3 mb-3">
          <span class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
                style="width:52px;height:52px;background:var(--cab-primary);font-size:1.2rem;flex-shrink:0;">
            {{ user.full_name|first|upper }}
          </span>
          <div>
            <div class="fw-semibold">{{ user.full_name }}</div>
            <div class="text-muted" style="font-size:.8rem;">с {{ user.created_at }}</div>
          </div>
        </div>

        <ul class="list-unstyled mb-0" style="font-size:.875rem;">
          <li class="d-flex align-items-center gap-2 py-2 border-bottom">
            <span class="bi bi-telephone text-muted" style="width:16px;"></span>
            <a href="tel:{{ user.phone }}" class="text-decoration-none" style="color:var(--cab-text);">{{ user.phone }}</a>
          </li>
          <li class="d-flex align-items-center gap-2 py-2">
            <span class="bi bi-envelope text-muted" style="width:16px;"></span>
            <a href="mailto:{{ user.email }}" class="text-decoration-none" style="color:var(--cab-text);">{{ user.email }}</a>
          </li>
        </ul>

        {% if user.note %}
        <div class="mt-3 p-3 rounded" style="background:#f8fafc;font-size:.82rem;color:#6b7280;">
          {{ user.note }}
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  {# Activity placeholder #}
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white border-0 py-3">
        <span class="fw-semibold" style="font-size:.875rem;">История</span>
      </div>
      <div class="card-body text-center py-5 text-muted">
        {% include "cabinet/includes/_empty_state.html" with message="История появится после подключения реальных данных" icon="bi-clock-history" %}
      </div>
    </div>
  </div>

</div>

{% endblock %}