{% extends "admin/base_site.html" %}
{% load humanize %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block extrastyle %}
<style>
    /* About page common styles */
    .about-section {
        margin: 20px 0;
        padding: 25px;
        border: 1px solid #ddd;
        background: #f5f5f5;
        max-width: 800px;
    }

    .about-section ul {
        list-style: none;
        padding-left: 0;
    }

    .about-section li {
        margin-top: 10px;
    }

    .about-section li:first-child {
        margin-top: 0;
    }

    .about-intro {
        margin: 20px 0;
        padding: 25px;
        background: #e8f4f8;
        border-left: 4px solid #417690;
        max-width: 800px;
    }

    .about-description {
        margin: 20px 0;
        padding: 25px;
        background: #f9f9f9;
        border-left: 4px solid #5b80b2;
        max-width: 800px;
    }

    .section-id-badge {
        display: inline-block;
        margin-left: 10px;
        padding: 2px 8px;
        background: #e0e0e0;
        color: #666;
        font-size: 0.75em;
        font-weight: normal;
        border-radius: 3px;
        font-family: monospace;
    }
</style>
{% endblock %}

{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="{% url 'admin:index' %}">Home</a>
    &rsaquo; {{ title }}
</div>
{% endblock %}

{% block content %}
<div id="content-main">

{% for section_id in section_order %}
    {% if section_id == 'page_intro' and config.page_intro %}
<!-- Page Intro -->
<div class="about-intro">
    {% if config.show_section_ids %}<div style="margin-bottom: 10px;"><span class="section-id-badge">[page_intro]</span></div>{% endif %}
    <div style="margin: 0; line-height: 1.6; font-size: 1.05em;">
        {{ config.page_intro|safe }}
    </div>
</div>

    {% elif section_id == 'dashboard_description' and config.show_dashboard_description %}
<!-- Dashboard Description -->
<div class="about-description">
    {% if config.show_section_ids %}<div style="margin-bottom: 10px;"><span class="section-id-badge">[dashboard_description]</span></div>{% endif %}
    <p style="margin: 0 0 10px 0; line-height: 1.6;">
        This dashboard displays version information for all critical components of your Django application,
        including the application code, software dependencies, database, cache, and task queue systems.
    </p>
    <p style="margin: 0 0 10px 0; line-height: 1.6; color: #666;">
        <strong>Configuration:</strong> To customize what information is shown, modify the <code>ABOUT_CONFIG</code>
        dictionary in your <code>settings.py</code> file. You can enable/disable version checks, add custom sections,
        and configure how deployment information is detected.
    </p>
    <p style="margin: 0; line-height: 1.6; color: #666;">
        If you want to hide this block, set <strong>'show_dashboard_description': False,</strong> in your <code>ABOUT_CONFIG</code> dictionary.
    </p>
</div>

    {% elif section_id == 'code_info' %}
        {% if versions.git_commit or versions.deployment_date %}
<!-- Code Information Section -->
<h2>Code Information{% if config.show_section_ids %}<span class="section-id-badge">[code_info]</span>{% endif %}</h2>
<div class="about-section">
    <ul>
        {% if versions.git_commit %}
        <li>
            <strong>Version:</strong>
            <code>{{ versions.git_commit|slice:":7" }}</code>
            <small style="color: #666;">({{ versions.git_commit }})</small>
        </li>
        {% endif %}

        {% if versions.deployment_date %}
        <li style="margin-top: 10px;">
            <strong>Deployed:</strong> {{ versions.deployment_date|naturaltime }} ({{ versions.deployment_date|date:"Y-m-d H:i:s T" }})
        </li>
        {% endif %}
    </ul>
</div>
        {% endif %}

    {% elif section_id == 'software_versions' %}
<!-- Software Version Information Section -->
<h2>Software Version Information{% if config.show_section_ids %}<span class="section-id-badge">[software_versions]</span>{% endif %}</h2>
<div class="about-section">
    <ul>

        {% if versions.django %}
        <li>
            <strong>Django Version:</strong> {{ versions.django }}
            <a href="https://docs.djangoproject.com/en/stable/releases/" target="_blank" style="margin-left: 10px; font-size: 0.9em;">
                (link to latest version info)
            </a>
        </li>
        {% endif %}

        {% if versions.python %}
        <li style="margin-top: 10px;">
            <strong>Python Version:</strong> {{ versions.python }}
            <a href="https://www.python.org/downloads/" target="_blank" style="margin-left: 10px; font-size: 0.9em;">
                (link to latest version info)
            </a>
        </li>
        {% endif %}

        {% if versions.database %}
        <li style="margin-top: 10px;">
            <strong>PostgreSQL Database Version:</strong> {{ versions.database }}
            <a href="https://www.postgresql.org/support/versioning/" target="_blank" style="margin-left: 10px; font-size: 0.9em;">
                (link to latest version info)
            </a>
        </li>
        {% endif %}

        {% if versions.celery %}
        <li style="margin-top: 10px;">
            <strong>Celery Version:</strong> {{ versions.celery }}
            <a href="https://docs.celeryq.dev/en/stable/changelog.html" target="_blank" style="margin-left: 10px; font-size: 0.9em;">
                (link to latest version info)
            </a>
        </li>
        {% endif %}

        {% if versions.redis %}
        <li style="margin-top: 10px;">
            <strong>Redis Version:</strong> {{ versions.redis }}
            <a href="https://redis.io/downloads/" target="_blank" style="margin-left: 10px; font-size: 0.9em;">
                (link to latest version info)
            </a>
        </li>
        {% endif %}
    </ul>
</div>

    {% elif section_id == 'cache_stats' and cache_stats %}
<!-- Cache Statistics Section -->
<h2>Cache Statistics{% if config.show_section_ids %}<span class="section-id-badge">[cache_stats]</span>{% endif %}</h2>
<div class="about-section">
    <ul>
        {% if cache_stats.backend %}
        <li>
            <strong>Cache Backend:</strong> {{ cache_stats.backend }}
            {% if cache_stats.backend_note %}
                <small style="color: #666;">({{ cache_stats.backend_note }})</small>
            {% endif %}
        </li>
        {% endif %}

        {% if cache_stats.total_keys %}
        <li style="margin-top: 10px;">
            <strong>Total Cache Keys:</strong> {{ cache_stats.total_keys|intcomma }}
        </li>
        {% endif %}

        {% if cache_stats.used_memory %}
        <li style="margin-top: 10px;">
            <strong>Used Memory:</strong> {{ cache_stats.used_memory }}
            {% if cache_stats.max_memory and cache_stats.max_memory != '0B' %}
                / {{ cache_stats.max_memory }}
            {% endif %}
        </li>
        {% endif %}

        {% if cache_stats.redis_version %}
        <li style="margin-top: 10px;">
            <strong>Redis Server Version:</strong> {{ cache_stats.redis_version }}
        </li>
        {% endif %}

        {% if cache_stats.connected_clients %}
        <li style="margin-top: 10px;">
            <strong>Connected Clients:</strong> {{ cache_stats.connected_clients }}
        </li>
        {% endif %}

        {% if cache_stats.uptime_days %}
        <li style="margin-top: 10px;">
            <strong>Redis Uptime:</strong> {{ cache_stats.uptime_days }} days
        </li>
        {% endif %}

        {% if cache_stats.error %}
        <li style="margin-top: 10px; color: #a00;">
            <strong>Error:</strong> {{ cache_stats.error }}
        </li>
        {% endif %}
    </ul>
</div>

    {% elif section_id == 'third_party_apps' and versions.third_party_apps %}
<!-- Third Party Django Apps Section -->
<h2>Third Party Apps{% if config.show_section_ids %}<span class="section-id-badge">[third_party_apps]</span>{% endif %}</h2>
<div class="about-section">
    <p style="margin: 0 0 15px 0; color: #666; font-size: 0.95em;">
        These are third-party Django apps installed via <code>INSTALLED_APPS</code> that are used by this app.
    </p>
    {% for dist_name, info in versions.third_party_apps.items %}
    <div style="margin: 15px 0; padding: 15px; background: white; border-left: 3px solid #5b80b2;">
        <div style="margin-bottom: 8px;">
            <strong style="font-size: 1.05em;">{{ dist_name }}</strong>
            <code style="margin-left: 10px; background: #f0f0f0; padding: 2px 6px; border-radius: 3px;">{{ info.version }}</code>
            {% if info.homepage %}
                <a href="{{ info.homepage }}" target="_blank" style="margin-left: 10px; font-size: 0.9em;">[docs]</a>
            {% endif %}
        </div>
        <div style="color: #666; font-size: 0.9em;">
            Apps: {% for app in info.apps %}<code style="background: #f9f9f9; padding: 1px 4px; margin-right: 5px;">{{ app }}</code>{% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

    {% elif section_id == 'third_party_integrations' and versions.integrations %}
<!-- Third Party Integrations Section -->
<h2>Third Party Integrations{% if config.show_section_ids %}<span class="section-id-badge">[third_party_integrations]</span>{% endif %}</h2>
<div class="about-section">
    <p style="margin: 0 0 15px 0; color: #666; font-size: 0.95em;">
        These are Python packages that don't require <code>INSTALLED_APPS</code> registration but may be actively used by your application.
    </p>

    <!-- Important Integrations -->
    {% if important_integrations %}
    <div style="margin-bottom: 20px;">
        <h3 style="margin: 0 0 10px 0; font-size: 1em; color: #333;">Important Integrations</h3>
        {% for integration in important_integrations %}
        <div style="margin: 10px 0; padding: 12px; background: white; border-left: 3px solid #79aec8;">
            <strong style="font-size: 1.05em;">{{ integration.package_name }}</strong>
            <code style="margin-left: 10px; background: #f0f0f0; padding: 2px 6px; border-radius: 3px;">{{ integration.version }}</code>
            {% if integration.homepage %}
                <a href="{{ integration.homepage }}" target="_blank" style="margin-left: 10px; font-size: 0.9em;">[docs]</a>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <!-- Other Integrations (Lazy-loaded) -->
    {% if other_integrations_count > 0 %}
    <div style="margin-top: 20px;">
        <details style="cursor: pointer;" id="other-integrations-details">
            <summary style="padding: 10px; background: white; border: 1px solid #ddd; border-radius: 3px; font-weight: bold;">
                Other Integrations ({{ other_integrations_count }})
            </summary>
            <div id="other-integrations-container" style="margin-top: 10px; padding: 10px; background: white; border: 1px solid #ddd; border-top: none;">
                <button
                    id="scan-integrations-btn"
                    style="padding: 10px 20px; background: #417690; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.95em;"
                    onclick="loadOtherIntegrations()">
                    Click to scan {{ other_integrations_count }} integrations
                </button>
                <div id="integrations-list" style="margin-top: 10px;"></div>
            </div>
        </details>
    </div>

    <script>
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    function loadOtherIntegrations() {
        const btn = document.getElementById('scan-integrations-btn');
        const list = document.getElementById('integrations-list');

        // Show loading state
        btn.textContent = 'Scanning...';
        btn.disabled = true;

        // Get CSRF token from cookie
        const csrftoken = getCookie('csrftoken');

        // Fetch integrations
        fetch('{% url "about:scan_integrations" %}', {
            method: 'GET',
            headers: {
                'X-CSRFToken': csrftoken,
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            // Hide button
            btn.style.display = 'none';

            // Render integrations
            if (data.integrations && data.integrations.length > 0) {
                list.innerHTML = data.integrations.map(integration => `
                    <div style="margin: 8px 0; padding: 8px; border-bottom: 1px solid #f0f0f0;">
                        <strong style="font-size: 0.95em;">${integration.package_name}</strong>
                        <code style="margin-left: 10px; background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 0.85em;">${integration.version}</code>
                        ${integration.homepage ? `<a href="${integration.homepage}" target="_blank" style="margin-left: 10px; font-size: 0.85em;">[docs]</a>` : ''}
                    </div>
                `).join('');
            } else {
                list.innerHTML = '<p style="color: #666; font-style: italic;">No other integrations found.</p>';
            }
        })
        .catch(error => {
            btn.textContent = 'Error loading integrations. Click to retry.';
            btn.disabled = false;
            console.error('Error loading integrations:', error);
        });
    }
    </script>
    {% endif %}
</div>

    {% else %}
        {# Custom section - find matching section and render it #}
        {% for section in custom_sections %}
            {% if section.id == section_id %}
<!-- Custom Section: {{ section.title }} -->
<h2>{{ section.title }}{% if config.show_section_ids %}<span class="section-id-badge">[{{ section.id }}]</span>{% endif %}</h2>
<div class="about-section">
    {{ section.content|safe }}
</div>
            {% endif %}
        {% endfor %}
    {% endif %}
{% endfor %}

</div>
{% endblock %}