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

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

{% block extrahead %}
{{ block.super }}
<!-- Alpine.js -->
{% block alpine_script %}
<script defer src="{% static 'admin/js/alpine.js' %}"></script>
{% endblock %}
<script defer src="{% static 'core/js/csrf.js' %}"></script>
{% endblock %}

{% block extrastyle %}
{{ block.super }}
<style>
    /* Alpine.js x-cloak 防止闪烁 */
    [x-cloak] { display: none !important; }

    /* 关于链接样式 - 融入用户工具栏 */
    #user-tools .about-link {
        color: var(--header-link-color, #81d4fa);
        margin-right: 10px;
    }

    #user-tools .about-link:hover {
        color: var(--header-link-color, #fff);
    }

    /* 反馈侧边栏样式 */
    .feedback-sidebar {
        position: fixed;
        right: 0;
        bottom: 100px;
        z-index: 9999;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .feedback-button {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 15px 8px;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 8px 0 0 8px;
        box-shadow: -2px 2px 15px rgba(102, 126, 234, 0.3);
        transition: all 0.3s ease;
        letter-spacing: 2px;
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .feedback-button:hover {
        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        box-shadow: -4px 4px 25px rgba(102, 126, 234, 0.5);
        transform: translateX(-5px);
    }

    .feedback-tooltip {
        position: absolute;
        right: 100%;
        top: 50%;
        transform: translateY(-50%);
        background: white;
        border-radius: 12px;
        padding: 20px;
        box-shadow: -5px 5px 30px rgba(0,0,0,0.15);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        width: 280px;
        margin-right: 10px;
        border: 1px solid #e0e0e0;
    }

    .feedback-sidebar:hover .feedback-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(-10px);
    }

    .feedback-tooltip::after {
        content: '';
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        border: 8px solid transparent;
        border-left-color: white;
    }

    .feedback-tooltip h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }

    .feedback-qrcode {
        text-align: center;
        margin-bottom: 15px;
    }

    .feedback-qrcode img {
        width: 120px;
        height: 120px;
        border-radius: 8px;
        border: 2px solid #f0f0f0;
    }

    .feedback-qrcodes {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 15px;
    }

    .feedback-qrcode-item {
        flex: 1;
        text-align: center;
    }

    .feedback-qrcode-item img {
        width: 100px;
        height: 100px;
        border-radius: 8px;
        border: 2px solid #f0f0f0;
        transition: transform 0.2s ease;
    }

    .feedback-qrcode-item img:hover {
        transform: scale(1.05);
    }

    .feedback-qrcode-item .qr-label {
        margin-top: 8px;
        font-size: 12px;
        color: #666;
        font-weight: 500;
    }

    .feedback-text {
        text-align: center;
        color: #666;
        font-size: 13px;
        line-height: 1.5;
    }

    .feedback-text .highlight {
        color: #667eea;
        font-weight: 600;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .feedback-sidebar {
            bottom: 80px;
        }

        .feedback-button {
            padding: 12px 6px;
            font-size: 12px;
            min-height: 100px;
        }

        .feedback-tooltip {
            width: 240px;
            padding: 15px;
        }

        .feedback-qrcodes {
            flex-direction: column;
            gap: 10px;
        }

        .feedback-qrcode-item img {
            width: 80px;
            height: 80px;
        }
    }

    #container a {
        text-decoration: none !important;
    }

    #container a:focus,
    #container a:hover {
        text-decoration: none !important;
    }
</style>
{% endblock %}



{% block branding %}
<div style="display:flex;align-items:center;gap:12px;">
    <h1 id="site-name" style="margin:0;">
        <a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a>
    </h1>
    <div x-data="{ open: false }" style="display:inline-block;position:relative;">
        <button @click="open = !open" type="button" style="background:transparent;border:none;color:rgba(255,255,255,0.78);padding:0 2px;cursor:pointer;font-size:12px;font-weight:500;letter-spacing:0.2px;">
            {% trans "语言" %} · {{ LANGUAGE_CODE|upper }}
        </button>
        <div x-show="open" @click.away="open = false" x-cloak
             style="position:absolute;left:0;top:110%;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.15);min-width:120px;z-index:9999;">
            {% get_available_languages as languages %}
            {% for lang_code, lang_name in languages %}
            <form action="{% url 'set_language' %}" method="post" style="margin:0;">
                {% csrf_token %}
                <input type="hidden" name="language" value="{{ lang_code }}">
                <input type="hidden" name="next" value="{{ request.path }}">
                <button type="submit" style="width:100%;text-align:left;padding:8px 14px;border:none;background:none;cursor:pointer;font-size:13px;color:#333;">
                    {% if lang_code == LANGUAGE_CODE %}✓ {% endif %}{{ lang_name }}
                </button>
            </form>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block userlinks %}
<a href="{% url 'admin:message_hub_inboxmessage_changelist' %}">{% trans "收件箱" %}</a> /
<a href="{% url 'admin:message_hub_messagesource_changelist' %}">{% trans "消息来源" %}</a> /
<a href="{% url 'admin:organization_accountcredential_changelist' %}">{% trans "账号管理" %}</a> /
<a href="{% url 'admin:core_systemconfig_changelist' %}">{% trans "系统配置" %}</a> /
<a href="{% url 'admin:app_list' 'django_q' %}">{% trans "Task" %}</a> /
<form action="{% url 'admin:logout' %}" method="post" style="display:inline; margin:0;">
    {% csrf_token %}
    <button
        type="submit"
        style="background:none;border:none;padding:0;margin:0;color:var(--header-link-color, #81d4fa);cursor:pointer;font:inherit;text-decoration:none;"
    >
        {% translate '注销' %}
    </button>
</form>
{% endblock %}

{% block footer %}
{{ block.super }}
{% endblock %}