{% extends "base.html" %}

{% block title %}Dashboard - LinkSync{% endblock %}

{% block content %}
<div class="dashboard-header">
    <h1>Dashboard</h1>
    <p class="welcome-text">Welcome, <span id="current-user"></span></p>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-value" id="link-count">-</div>
        <div class="stat-label">Total Links</div>
        <a href="/links" class="stat-link">View all &rarr;</a>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="collection-count">-</div>
        <div class="stat-label">Collections</div>
        <a href="/collections" class="stat-link">View all &rarr;</a>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="api-key-count">-</div>
        <div class="stat-label">API Keys</div>
        <a href="/api-keys" class="stat-link">Manage &rarr;</a>
    </div>
</div>

<div class="quick-actions">
    <h2>Quick Actions</h2>
    <div class="action-grid">
        <a href="/links?action=new" class="action-card">
            <span class="action-icon">+</span>
            <span class="action-label">Add Link</span>
        </a>
        <a href="/collections?action=new" class="action-card">
            <span class="action-icon">+</span>
            <span class="action-label">New Collection</span>
        </a>
        <a href="/api-keys?action=new" class="action-card">
            <span class="action-icon">+</span>
            <span class="action-label">Create API Key</span>
        </a>
        <a href="/docs" target="_blank" class="action-card">
            <span class="action-icon">&#128736;</span>
            <span class="action-label">API Documentation</span>
        </a>
    </div>
</div>

<div id="admin-section" class="admin-quick" style="display: none;">
    <h2>Admin</h2>
    <div class="action-grid">
        <a href="/admin" class="action-card">
            <span class="action-icon">&#128100;</span>
            <span class="action-label">Manage Users</span>
        </a>
        <a href="/admin?action=new-user" class="action-card">
            <span class="action-icon">+</span>
            <span class="action-label">Create User</span>
        </a>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/dashboard.js"></script>
{% endblock %}