{% extends "base.html" %}
{% load scoped_tags %}

{% block title %}Dashboard{% endblock %}
{% block page_title %}Dashboard{% endblock %}
{% block page_subtitle %}Overview of your platform{% endblock %}
{% block layer_indicator %}Layers 3, 4, 6, 8, 9{% endblock %}

{% block content %}
{# Stats Cards #}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
  {% include "components/_stat_card.html" with label="Services" value=stats.services|default:"0" icon="&#9881;" subtitle="Visible to you" %}
  {% include "components/_stat_card.html" with label="Teams" value=stats.teams|default:"0" icon="&#128101;" subtitle="Your memberships" %}
  {% include "components/_stat_card.html" with label="Active Deploys" value=stats.active_deploys|default:"0" icon="&#128640;" subtitle="In progress" %}
  {% include "components/_stat_card.html" with label="Notifications" value=stats.unread|default:"0" icon="&#128276;" subtitle="Unread" %}
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
  {# Recent Activity #}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-semibold text-slate-900">Recent Activity</h3>
      <a href="{% url 'audit_list' %}" class="text-xs text-brand-600 hover:text-brand-700">View all</a>
    </div>
    {% if recent_audit %}
      {% include "components/_timeline.html" with entries=recent_audit %}
    {% else %}
      <p class="text-sm text-slate-400 text-center py-6">No activity yet</p>
    {% endif %}
  </div>

  {# Active Environments #}
  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-semibold text-slate-900">Active Environments</h3>
      <a href="{% url 'environments_list' %}" class="text-xs text-brand-600 hover:text-brand-700">View all</a>
    </div>
    {% if active_envs %}
    <div class="space-y-3">
      {% for env in active_envs %}
      <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
        <div>
          <span class="text-sm font-medium text-slate-700">{{ env.name }}</span>
          <span class="text-xs text-slate-400 ml-2">{{ env.owner_id|truncate_id }}</span>
        </div>
        {% include "components/_state_badge.html" with state=env.state %}
      </div>
      {% endfor %}
    </div>
    {% else %}
      <p class="text-sm text-slate-400 text-center py-6">No active environments</p>
    {% endif %}
  </div>
</div>

{# Isolation Demo Callout #}
{% if scoped_principal %}
<div class="mt-6 bg-brand-50 border border-brand-200 rounded-xl p-5">
  <h3 class="text-sm font-semibold text-brand-900 mb-1">Isolation Demo</h3>
  <p class="text-sm text-brand-700">
    You're viewing as <strong>{{ scoped_principal.display_name }}</strong>.
    Switch users in the bar above to see how the dashboard changes &mdash;
    each user sees only their own services and the ones shared with their teams.
  </p>
</div>
{% endif %}
{% endblock %}