{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<style>
/* Hide theme toggle */
.theme-toggle, #theme-toggle, .color-theme-toggle {
    display: none !important;
}

/* Welcome Section */
.welcome-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.welcome-section h1 {
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.welcome-section p {
    font-size: 1.125rem;
    margin: 0;
    opacity: 0.95;
}

/* Quick Action Cards */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.quick-action-card {
    background: white;
    border-radius: 0.75rem;
    padding: 2rem;
    text-decoration: none;
    color: #111827;
    transition: all 0.3s;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.quick-action-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.quick-action-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: white;
}

.quick-action-icon svg {
    width: 2rem;
    height: 2rem;
}

.quick-action-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #111827;
}

.quick-action-card p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* Stats Overview */
.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-box {
    background: white;
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.stat-box .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #667eea;
    margin: 0;
}

.stat-box .stat-label {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.5rem 0 0 0;
}

/* Dashboard Button */
.dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    margin: 2rem auto;
}

.dashboard-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.dashboard-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Module Enhancement */
.module {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
}

.module h2 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.5rem;
    margin: 0;
    border-radius: 0.75rem 0.75rem 0 0;
}

.module h2 a {
    color: white;
}

.module caption {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.5rem;
}

.module caption a {
    color: white;
}

/* Hide default app list if we show quick actions */
#content-main .module:nth-child(n+2) {
    margin-top: 2rem;
}
</style>
{% endblock %}

{% block content %}
<div id="content-main">
    
    <!-- Quick Actions -->
    <div class="quick-actions">
        <a href="/dashboard/" class="quick-action-card">
            <div class="quick-action-icon">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 3v18h18"></path><path d="M7 16l4-8 4 4 4-6"></path></svg>
            </div>
            <h3>View Dashboard</h3>
            <p>Analytics, charts, and overview</p>
        </a>

        <a href="/tenant/tenant/" class="quick-action-card">
            <div class="quick-action-icon">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 21v-6a2 2 0 0 1 2 -2h2c.641 0 1.212 .302 1.578 .771"></path><path d="M20.136 11.136l-8.136 -8.136l-9 9h2v7a2 2 0 0 0 2 2h6.344"></path></svg>
            </div>
            <h3>Manage Tenants</h3>
            <p>Add, edit, and manage tenant records</p>
        </a>

        <a href="/room/room/" class="quick-action-card">
            <div class="quick-action-icon">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 21h18M3 10h18M5 6l7-3 7 3M4 10v11M20 10v11M8 14v3M12 14v3M16 14v3"></path></svg>
            </div>
            <h3>Manage Rooms</h3>
            <p>View and configure all rooms</p>
        </a>

        <a href="/paymentlog/paymentlog/" class="quick-action-card">
            <div class="quick-action-icon">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 3v18h18"></path><path d="M7 16l4-8 4 4 4-6"></path></svg>
            </div>
            <h3>Track Payments</h3>
            <p>Monitor all payment logs</p>
        </a>

        <a href="/meal/meal/" class="quick-action-card">
            <div class="quick-action-icon">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.06 22.99h1.66c.84 0 1.53-.64 1.63-1.46L23 5.05h-5V1h-1.97v4.05h-4.97l.3 2.34c1.71.47 3.31 1.32 4.27 2.26 1.44 1.42 2.43 2.89 2.43 5.29v8.05zM1 21.99V21h15.03v.99c0 .55-.45 1-1.01 1H2.01c-.56 0-1.01-.45-1.01-1z"></path></svg>
            </div>
            <h3>Manage Meals</h3>
            <p>Configure meal plans and pricing</p>
        </a>

        <a href="/hostel/hostel/" class="quick-action-card">
            <div class="quick-action-icon">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 21h18M5 21V7l8-4v18M19 21V11l-6-6"></path><path d="M9 9v.01M9 12v.01M9 15v.01M9 18v.01M15 12v.01M15 15v.01"></path></svg>
            </div>
            <h3>Hostel Settings</h3>
            <p>Configure hostel information</p>
        </a>
    </div>

    <!-- View Full Dashboard Button -->
    <div style="text-align: center;">
        <a href="/dashboard/" class="dashboard-btn">
            <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12h1m8-9v1m8 8h1M4.207 17.793a1 1 0 0 1 0-1.414l1.414-1.414a1 1 0 0 1 1.414 0l1.414 1.414a1 1 0 0 1 0 1.414l-1.414 1.414a1 1 0 0 1-1.414 0L4.207 17.793zM9 12a3 3 0 1 1 6 0a3 3 0 0 1-6 0"></path><circle cx="12" cy="12" r="3"></circle></svg>
            Open Full Dashboard
        </a>
    </div>
</div>
{% endblock %}

{% block sidebar %}
<div id="content-related">
    <div class="module" id="recent-actions-module">
        <h2>{% translate 'Recent actions' %}</h2>
        <h3>{% translate 'My actions' %}</h3>
        {% load log %}
        {% get_admin_log 10 as admin_log for_user user %}
        {% if not admin_log %}
            <p>{% translate 'None available' %}</p>
        {% else %}
            <ul class="actionlist">
                {% for entry in admin_log %}
                    <li class="{% if entry.is_addition %}addlink{% endif %}{% if entry.is_change %}changelink{% endif %}{% if entry.is_deletion %}deletelink{% endif %}">
                        {% if entry.is_deletion or not entry.get_admin_url %}
                            {{ entry.object_repr }}
                        {% else %}
                            <a href="{{ entry.get_admin_url }}">{{ entry.object_repr }}</a>
                        {% endif %}
                        <br>
                        {% if entry.content_type %}
                            <span class="mini quiet">{% filter capfirst %}{{ entry.content_type.name }}{% endfilter %}</span>
                        {% else %}
                            <span class="mini quiet">{% translate 'Unknown content' %}</span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>
{% endblock %}