{% extends 'base.html' %}
{% load static %}



{% block content %}
<div class="container-fluid p-0 m-0 pt-5 mt-4" style="background-color: var(--bg-main); min-height: 100vh;">
    <div class="row g-0">
        {% include 'admin_workspace/_admin_sidebar.html' %}

        <!-- Main Content Area -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-4 px-lg-5 py-5">
            <div class="d-flex justify-content-between align-items-end mb-5">
                <div class="fade-in-up">
                    <h1 class="serif-heading display-5 mb-2 text-main" style="color: var(--text-main);">Website CMS</h1>
                    <p class="text-muted fs-5 mb-0" style="max-width: 600px;">Manage the dynamic content of the public conference website.</p>
                </div>
                <div class="fade-in-up" style="animation-delay: 0.1s;">
                    <a href="{% url 'index' %}" target="_blank" class="btn b-btn-primary px-4 py-2" style="border-radius: 100px;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-2"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
                        View Public Website
                    </a>
                </div>
            </div>

            <!-- CMS Modules Grid -->
            <div class="row g-4 mb-5">
                <!-- Hero Section -->
                <div class="col-md-6 col-lg-4">
                    <div class="b-card h-100 fade-in-up d-flex flex-column" style="animation-delay: 0.1s; cursor: pointer;">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div class="bg-secondary rounded p-3 d-inline-flex" style="background: var(--secondary-forest-dim) !important;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--highlight-sage)" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg>
                            </div>
                            <span class="badge bg-light text-muted border">{{ hero_count }}</span>
                        </div>
                        <h4 class="serif-heading text-main mb-2">Hero Section</h4>
                        <p class="text-muted small mb-4 flex-grow-1">Manage the main landing banner, countdown, and calls to action.</p>
                        <a href="/admin/cms/herosection/" class="btn btn-sm btn-outline-light text-muted w-100 mt-auto" style="border-color: var(--border-light);">Manage Content</a>
                    </div>
                </div>
                
                <!-- About Section -->
                <div class="col-md-6 col-lg-4">
                    <div class="b-card h-100 fade-in-up d-flex flex-column" style="animation-delay: 0.2s; cursor: pointer;">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div class="bg-secondary rounded p-3 d-inline-flex" style="background: var(--secondary-forest-dim) !important;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--highlight-sage)" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
                            </div>
                            <span class="badge bg-light text-muted border">{{ about_count }}</span>
                        </div>
                        <h4 class="serif-heading text-main mb-2">About Section</h4>
                        <p class="text-muted small mb-4 flex-grow-1">Update the history, mission, and statistics of the conference.</p>
                        <a href="/admin/cms/aboutsection/" class="btn btn-sm btn-outline-light text-muted w-100 mt-auto" style="border-color: var(--border-light);">Manage Content</a>
                    </div>
                </div>

                <!-- Themes -->
                <div class="col-md-6 col-lg-4">
                    <div class="b-card h-100 fade-in-up d-flex flex-column" style="animation-delay: 0.3s; cursor: pointer;">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div class="bg-secondary rounded p-3 d-inline-flex" style="background: var(--secondary-forest-dim) !important;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--highlight-sage)" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
                            </div>
                            <span class="badge bg-light text-muted border">{{ theme_count }}</span>
                        </div>
                        <h4 class="serif-heading text-main mb-2">Scientific Themes</h4>
                        <p class="text-muted small mb-4 flex-grow-1">Manage the core thematic axes, topics, and subtopics.</p>
                        <a href="/admin/cms/conferencetheme/" class="btn btn-sm btn-outline-light text-muted w-100 mt-auto" style="border-color: var(--border-light);">Manage Themes</a>
                    </div>
                </div>

                <!-- Speakers & Schedule -->
                <div class="col-md-6 col-lg-4">
                    <div class="b-card h-100 fade-in-up d-flex flex-column" style="animation-delay: 0.4s; cursor: pointer;">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div class="bg-secondary rounded p-3 d-inline-flex" style="background: var(--secondary-forest-dim) !important;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--highlight-sage)" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                            </div>
                            <span class="badge bg-light text-muted border">{{ speaker_count }}</span>
                        </div>
                        <h4 class="serif-heading text-main mb-2">Schedule & Sessions</h4>
                        <p class="text-muted small mb-4 flex-grow-1">Manage event itinerary, speakers, timings, and venues.</p>
                        <a href="/admin/cms/schedulesession/" class="btn btn-sm btn-outline-light text-muted w-100 mt-auto" style="border-color: var(--border-light);">Manage Schedule</a>
                    </div>
                </div>

                <!-- Committee -->
                <div class="col-md-6 col-lg-4">
                    <div class="b-card h-100 fade-in-up d-flex flex-column" style="animation-delay: 0.5s; cursor: pointer;">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div class="bg-secondary rounded p-3 d-inline-flex" style="background: var(--secondary-forest-dim) !important;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--highlight-sage)" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                            </div>
                            <span class="badge bg-light text-muted border">{{ committee_count }}</span>
                        </div>
                        <h4 class="serif-heading text-main mb-2">Committee</h4>
                        <p class="text-muted small mb-4 flex-grow-1">Update international, national, and local organizing committee members.</p>
                        <a href="/admin/cms/committeemember/" class="btn btn-sm btn-outline-light text-muted w-100 mt-auto" style="border-color: var(--border-light);">Manage Members</a>
                    </div>
                </div>

                <!-- Awards -->
                <div class="col-md-6 col-lg-4">
                    <div class="b-card h-100 fade-in-up d-flex flex-column" style="animation-delay: 0.6s; cursor: pointer;">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div class="bg-secondary rounded p-3 d-inline-flex" style="background: var(--secondary-forest-dim) !important;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--highlight-sage)" stroke-width="2"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"></polyline></svg>
                            </div>
                            <span class="badge bg-light text-muted border">{{ award_count }}</span>
                        </div>
                        <h4 class="serif-heading text-main mb-2">Awards & Prizes</h4>
                        <p class="text-muted small mb-4 flex-grow-1">Manage young researcher awards, eligibility, and guidelines.</p>
                        <a href="/admin/cms/award/" class="btn btn-sm btn-outline-light text-muted w-100 mt-auto" style="border-color: var(--border-light);">Manage Awards</a>
                    </div>
                </div>
                
                <!-- Sponsors -->
                <div class="col-md-6 col-lg-4">
                    <div class="b-card h-100 fade-in-up d-flex flex-column" style="animation-delay: 0.7s; cursor: pointer;">
                        <div class="d-flex justify-content-between align-items-start mb-4">
                            <div class="bg-secondary rounded p-3 d-inline-flex" style="background: var(--secondary-forest-dim) !important;">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--highlight-sage)" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                            </div>
                            <span class="badge bg-light text-muted border">{{ sponsor_count }}</span>
                        </div>
                        <h4 class="serif-heading text-main mb-2">Sponsors</h4>
                        <p class="text-muted small mb-4 flex-grow-1">Manage corporate partners, sponsors, and logos.</p>
                        <a href="/admin/cms/sponsor/" class="btn btn-sm btn-outline-light text-muted w-100 mt-auto" style="border-color: var(--border-light);">Manage Sponsors</a>
                    </div>
                </div>
            </div>
            
        </main>
    </div>
</div>
{% endblock %}