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

{% block page_title %}{{ page_title }}{% endblock %}

{% block extra_css %}
<style>
.letter-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.letter-header {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.letter-card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
    padding: 1.5rem;
}

.letter-card h3 {
    margin: 0 0 0.5rem 0;
    color: #333;
}

.letter-meta {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.letter-description {
    color: #555;
    line-height: 1.6;
}

.btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.25rem;
    text-decoration: none;
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.btn-primary { background: #007bff; color: white; }
.btn-success { background: #28a745; color: white; }
.btn-danger { background: #dc3545; color: white; }
.btn-secondary { background: #6c757d; color: white; }

.filter-tabs {
    margin-bottom: 2rem;
}

.filter-tab {
    padding: 0.75rem 1.5rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    text-decoration: none;
    color: #495057;
    margin-right: 0.5rem;
    border-radius: 0.25rem;
}

.filter-tab.active {
    background: #007bff;
    color: white;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pagination a {
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    text-decoration: none;
    color: #495057;
    border-radius: 0.25rem;
}

.pagination .current {
    background: #007bff;
    color: white;
}
</style>
{% endblock %}

{% block content %}
<div class="letter-container">
    <div class="letter-header">
        <h1>{{ page_title }}</h1>
        <a href="{% url 'letters:letter_create' %}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Buat Surat Baru
        </a>
    </div>

    <!-- Filter Tabs -->
    <div class="filter-tabs">
        <a href="{% url 'letters:letter_list' %}" 
           class="filter-tab {% if not request.GET.type %}active{% endif %}">
            Semua Surat
        </a>
        <a href="{% url 'letters:surat_masuk' %}" 
           class="filter-tab {% if request.GET.type == 'masuk' %}active{% endif %}">
            Surat Masuk
        </a>
        <a href="{% url 'letters:surat_keluar' %}" 
           class="filter-tab {% if request.GET.type == 'keluar' %}active{% endif %}">
            Surat Keluar
        </a>
    </div>

    <!-- Letters List -->
    {% if letters %}
        {% for letter in letters %}
        <div class="letter-card">
            <h3>{{ letter.title }}</h3>
            <div class="letter-meta">
                <strong>Nomor:</strong> {{ letter.letter_number }} | 
                <strong>Jenis:</strong> {{ letter.get_letter_type_display }} | 
                <strong>Status:</strong> {{ letter.get_status_display }} | 
                <strong>Dibuat:</strong> {{ letter.created_date|date:"d M Y" }}
            </div>
            <div class="letter-description">
                {{ letter.description|truncatewords:30 }}
            </div>
            <div style="margin-top: 1rem;">
                <a href="{% url 'letters:letter_detail' letter.pk %}" class="btn btn-primary">
                    <i class="fas fa-eye"></i> Lihat
                </a>
                <a href="{% url 'letters:letter_edit' letter.pk %}" class="btn btn-success">
                    <i class="fas fa-edit"></i> Edit
                </a>
                <a href="{% url 'letters:letter_delete' letter.pk %}" class="btn btn-danger">
                    <i class="fas fa-trash"></i> Hapus
                </a>
                {% if letter.document_file %}
                <a href="{{ letter.document_file.url }}" class="btn btn-secondary" target="_blank">
                    <i class="fas fa-download"></i> Download
                </a>
                {% endif %}
            </div>
        </div>
        {% endfor %}

        <!-- Pagination -->
        {% if letters.has_other_pages %}
        <div class="pagination">
            {% if letters.has_previous %}
                <a href="?page=1">&laquo; First</a>
                <a href="?page={{ letters.previous_page_number }}">Previous</a>
            {% endif %}
            
            <span class="current">
                Page {{ letters.number }} of {{ letters.paginator.num_pages }}
            </span>
            
            {% if letters.has_next %}
                <a href="?page={{ letters.next_page_number }}">Next</a>
                <a href="?page={{ letters.paginator.num_pages }}">Last &raquo;</a>
            {% endif %}
        </div>
        {% endif %}
    {% else %}
        <div class="letter-card">
            <h3>Tidak ada surat</h3>
            <p>Belum ada surat yang dibuat. <a href="{% url 'letters:letter_create' %}">Buat surat pertama</a></p>
        </div>
    {% endif %}
</div>
{% endblock %}