thrillwiki_django_no_react/templates/moderation/admin/base.html

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

{% block title %}ThrillWiki Moderation{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/inline-edit.css' %}">
<style>
.moderation-nav {
    @apply bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shadow-sm;
}

.moderation-nav-container {
    @apply container px-4 mx-auto;
}

.moderation-nav ul {
    @apply flex items-center h-16 space-x-6;
}

.moderation-nav li a {
    @apply flex items-center px-3 py-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

.moderation-nav li a.active {
    @apply bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300;
}

.moderation-nav li a i {
    @apply mr-2;
}

.moderation-content {
    @apply container px-4 py-6 mx-auto;
}

.submission-list {
    @apply space-y-6;
}

.submission-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200/50 dark:border-gray-700/50;
}

.submission-header {
    @apply flex justify-between items-start;
}

.submission-meta {
    @apply text-sm text-gray-600 dark:text-gray-400;
}

.submission-changes {
    @apply mt-4 space-y-2;
}

.change-item {
    @apply flex items-start space-x-2 p-2 rounded bg-gray-50 dark:bg-gray-700/50;
}

.change-field {
    @apply font-medium text-gray-900 dark:text-gray-100;
}

.change-value {
    @apply text-gray-700 dark:text-gray-300;
}

.action-buttons {
    @apply flex justify-end space-x-4 mt-4;
}

.btn-approve {
    @apply px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600;
}

.btn-reject {
    @apply px-4 py-2 text-white bg-red-600 rounded-lg hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600;
}

.review-notes {
    @apply mt-4;
}

.review-notes textarea {
    @apply w-full border-gray-300 rounded-lg form-textarea dark:border-gray-600 dark:bg-gray-700 dark:text-white;
}

.filters {
    @apply p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200/50 dark:border-gray-700/50;
}

.form-select {
    @apply border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white;
}

.status-badge {
    @apply px-2 py-1 text-sm rounded-full;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.status-approved, .status-auto_approved {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.status-rejected {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}
</style>
{% endblock %}

{% block content %}
<div class="moderation-nav">
    <div class="moderation-nav-container">
        <ul>
            <li>
                <a href="{% url 'moderation:admin:index' %}" class="{% if request.resolver_match.url_name == 'index' %}active{% endif %}">
                    <i class="fas fa-tachometer-alt"></i>
                    Dashboard
                </a>
            </li>
            <li>
                <a href="{% url 'moderation:edit_submissions' %}" 
                   class="{% if request.resolver_match.url_name == 'edit_submissions' %}active{% endif %}">
                    <i class="fas fa-edit"></i>
                    Edit Submissions
                </a>
            </li>
            <li>
                <a href="{% url 'moderation:photo_submissions' %}"
                   class="{% if request.resolver_match.url_name == 'photo_submissions' %}active{% endif %}">
                    <i class="fas fa-image"></i>
                    Photo Submissions
                </a>
            </li>
            {% if user.role == 'ADMIN' or user.role == 'SUPERUSER' %}
            <li>
                <a href="{% url 'admin:index' %}"
                   class="{% if request.resolver_match.url_name == 'admin' %}active{% endif %}">
                    <i class="fas fa-shield-alt"></i>
                    Admin Panel
                </a>
            </li>
            {% endif %}
        </ul>
    </div>
</div>

<div class="moderation-content">
    {% block moderation_content %}{% endblock %}
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/inline-edit.js' %}"></script>
{% endblock %}