{% 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>

    {% include "stats.html" %}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
        {% include "publish.html" %}
        {% include "send_email.html" %}
        {% include "change_password.html" %}
    </div>

    {% if user.is_admin() %}
    <div class="relative my-12">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
            <div class="w-full border-t-2 border-blue-300"></div>
        </div>
        <div class="relative flex justify-center">
            <span class="bg-gray-50 px-4 text-sm font-semibold text-blue-900 flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                </svg>
                Administration
            </span>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {% include "subscribers/list.html" %}
        {% include "users/list.html" %}
        {% include "users/form.html" %}
        {% include "posts/list.html" %}
        {% include "comments/list.html" %}
    </div>
    {% endif %}
</div>
{% endblock %}