{% extends "admin/base.html" %}

{% block title %}Manage Content - GJEE Admin{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Manage Site Content</h1>
</div>

<p class="info-text">Edit the content that appears on different pages of the website. Changes will be immediately visible to visitors.</p>

<div class="content-cards">
    <div class="content-card">
        <h3>About / Home Page</h3>
        <p>The main introduction text shown on the homepage.</p>
        <a href="{{ url_for('admin_edit_content', key='about') }}" class="btn btn-primary">Edit Content</a>
    </div>
    
    <div class="content-card">
        <h3>Objectives</h3>
        <p>The objectives and mission of the GJEE journal.</p>
        <a href="{{ url_for('admin_edit_content', key='objectives') }}" class="btn btn-primary">Edit Content</a>
    </div>
    
    <div class="content-card">
        <h3>Notes for Contributors</h3>
        <p>Guidelines for authors submitting articles.</p>
        <a href="{{ url_for('admin_edit_content', key='notes') }}" class="btn btn-primary">Edit Content</a>
    </div>
    
    <div class="content-card">
        <h3>Contact Information</h3>
        <p>Contact details and correspondence information.</p>
        <a href="{{ url_for('admin_edit_content', key='contact') }}" class="btn btn-primary">Edit Content</a>
    </div>
    
    <div class="content-card">
        <h3>Footer Content</h3>
        <p>Copyright notice, ABN, and last updated text shown in the footer of all pages.</p>
        <a href="{{ url_for('admin_edit_content', key='footer') }}" class="btn btn-primary">Edit Content</a>
    </div>
    
    <div class="content-card">
        <h3>Globe Image Settings</h3>
        <p>Configure the logo image path, alt text, and dimensions displayed on the homepage.</p>
        <a href="{{ url_for('admin_edit_content', key='globe_image') }}" class="btn btn-primary">Edit Content</a>
    </div>
</div>

<div class="section">
    <h2>All Content Entries</h2>
    <table class="data-table">
        <thead>
            <tr>
                <th>Key</th>
                <th>Title</th>
                <th>Last Updated</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for content in contents %}
            <tr>
                <td>{{ content.key }}</td>
                <td>{{ content.title if content.title else '-' }}</td>
                <td>{{ content.updated_at.strftime('%Y-%m-%d %H:%M') if content.updated_at else '-' }}</td>
                <td>
                    <a href="{{ url_for('admin_edit_content', key=content.key) }}" class="btn btn-sm">Edit</a>
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="4" class="no-data">No content entries found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}

{% block extra_css %}
<style>
.content-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}
.content-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.content-card h3 {
    color: #611F3A;
    margin-bottom: 10px;
}
.content-card p {
    color: #666;
    margin-bottom: 15px;
    font-size: 14px;
}
.info-text {
    background: #e8f4fd;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 25px;
    border-left: 4px solid #2196F3;
}
</style>
{% endblock %}