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

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

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

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

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    font-size: 1rem;
}

.form-control:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.25rem;
    text-decoration: none;
    display: inline-block;
    margin-right: 0.5rem;
    cursor: pointer;
}

.btn-primary { background: #007bff; color: white; }
.btn-secondary { background: #6c757d; color: white; }

.form-actions {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.error-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.help-text {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <div class="form-card">
        <h2>{{ page_title }}</h2>
        
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            
            <div class="form-group">
                <label for="{{ form.title.id_for_label }}">{{ form.title.label }}</label>
                {{ form.title }}
                {% if form.title.errors %}
                    <div class="error-message">{{ form.title.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="{{ form.letter_type.id_for_label }}">{{ form.letter_type.label }}</label>
                {{ form.letter_type }}
                {% if form.letter_type.errors %}
                    <div class="error-message">{{ form.letter_type.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="{{ form.description.id_for_label }}">{{ form.description.label }}</label>
                {{ form.description }}
                {% if form.description.errors %}
                    <div class="error-message">{{ form.description.errors.0 }}</div>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="{{ form.document_file.id_for_label }}">{{ form.document_file.label }}</label>
                {{ form.document_file }}
                {% if form.document_file.errors %}
                    <div class="error-message">{{ form.document_file.errors.0 }}</div>
                {% endif %}
                <div class="help-text">{{ form.document_file.help_text }}</div>
            </div>
            
            <div class="form-actions">
                <a href="{% url 'letters:letter_list' %}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left"></i> Kembali
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save"></i> Simpan Surat
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}