{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block content %}
    <div class="max-w-5xl mx-auto p-4 sm:p-6">
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
            <p class="mt-2 text-gray-600 items-start">
                <span>Connected as
                    <a href="/users/{{ user.username }}"
                       class="hover:text-blue-600 hover:underline font-bold">{{ user.username }}</a></span>
                {% if user.is_admin() %}
                    <span class="ml-2 inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800">
                        admin
                    </span>
                {% endif %}
            </p>
            <button hx-get="/admin/logout"
                    type="submit"
                    class="flex items-center text-sm text-gray-500 hover:text-red-600 transition-colors cursor-pointer gap-1 mt-2">
                <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                </svg>
                <span>Logout</span>
            </button>
        </div>
        {% if user.is_admin() %}
            <div class="mb-8 p-6 bg-gradient-to-br from-blue-50 to-indigo-50 bg-blue-50 rounded-lg border border-blue-200">
                <h2 class="text-lg font-semibold text-blue-900 mb-6">Administration</h2>
                {% include "stats.html" %}
                {% include "subscribers/list.html" %}
            </div>
        {% endif %}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {% include "publish.html" %}
            {% include "send_email.html" %}
            {% include "change_password.html" %}
        </div>
    </div>
{% endblock %}