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

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

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

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

.detail-header {
    border-bottom: 2px solid #007bff;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.detail-title {
    color: #333;
    margin: 0 0 0.5rem 0;
}

.detail-meta {
    color: #666;
    font-size: 0.9rem;
}

.detail-content {
    line-height: 1.6;
    color: #555;
}

.btn {
    padding: 0.75rem 1.5rem;
    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; }

.file-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    padding: 1rem;
    margin-top: 1rem;
}

.file-icon {
    font-size: 2rem;
    color: #007bff;
    margin-right: 1rem;
}
</style>
{% endblock %}

{% block content %}
<div class="detail-container">
    <div class="detail-card">
        <div class="detail-header">
            <h1 class="detail-title">{{ letter.title }}</h1>
            <div class="detail-meta">
                <strong>Nomor Surat:</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 H:i" }} | 
                <strong>Oleh:</strong> {{ letter.created_by.get_full_name|default:letter.created_by.username }}
            </div>
        </div>
        
        <div class="detail-content">
            <h3>Deskripsi</h3>
            <p>{{ letter.description|linebreaks }}</p>
        </div>
        
        {% if letter.document_file %}
        <div class="file-info">
            <div style="display: flex; align-items: center;">
                <i class="fas fa-file-word file-icon"></i>
                <div>
                    <h4 style="margin: 0;">File Surat</h4>
                    <p style="margin: 0.25rem 0; color: #666;">
                        {{ letter.document_file.name|slice:"7:" }} 
                        ({{ letter.document_file.size|filesizeformat }})
                    </p>
                </div>
            </div>
        </div>
        {% endif %}
        
        <div style="margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #dee2e6;">
            <a href="{% url 'letters:letter_edit' letter.pk %}" class="btn btn-success">
                <i class="fas fa-edit"></i> Edit Surat
            </a>
            <a href="{% url 'letters:letter_delete' letter.pk %}" class="btn btn-danger">
                <i class="fas fa-trash"></i> Hapus Surat
            </a>
            {% if letter.document_file %}
            <a href="{{ letter.document_file.url }}" class="btn btn-primary" target="_blank">
                <i class="fas fa-download"></i> Download File
            </a>
            {% endif %}
            <a href="{% url 'letters:letter_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Kembali ke Daftar
            </a>
        </div>
    </div>
</div>
{% endblock %}