{% extends 'admin/base.html.twig' %}

{% block title %}{{ page ? 'Sayfa Düzenle' : 'Yeni Sayfa' }}{% endblock %}
{% block page_title %}{{ page ? 'Sayfa Düzenle: ' ~ page.title : 'Yeni Sayfa Oluştur' }}{% endblock %}

{% block body %}
    <form method="post" action="{{ page ? path('admin_page_edit', {id: page.id}) : path('admin_page_create') }}">
        <input type="hidden" name="_token" value="{{ csrf_token('page_form') }}">

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            {# Left column (8/12) #}
            <div class="lg:col-span-8 space-y-6">
                {# Page Info Card #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-file-alt text-gray-400 mr-2"></i> Sayfa İçeriği
                        </h3>
                    </div>
                    <div class="card-body space-y-4">
                        {# Title #}
                        <div>
                            <label for="title" class="form-label">Başlık <span class="text-red-500">*</span></label>
                            <input type="text" id="title" name="title" required
                                   value="{{ page ? page.title : '' }}"
                                   class="form-input w-full"
                                   placeholder="Sayfa başlığını girin...">
                        </div>

                        {# Slug #}
                        <div>
                            <label for="slug" class="form-label">Slug</label>
                            <input type="text" id="slug" name="slug"
                                   value="{{ page ? page.slug : '' }}"
                                   class="form-input w-full"
                                   placeholder="otomatik oluşturulur">
                            <p class="text-xs text-gray-500 mt-1">Boş bırakılırsa başlıktan otomatik oluşturulur.</p>
                        </div>

                        {# Content #}
                        <div>
                            <label for="content" class="form-label">İçerik</label>
                            <textarea id="content" name="content" rows="15"
                                      class="form-input w-full"
                                      placeholder="Sayfa içeriğini yazın...">{{ page ? page.content : '' }}</textarea>
                        </div>

                        {# Featured Image #}
                        <div>
                            <label for="featured_image" class="form-label">Öne Çıkan Görsel URL</label>
                            <input type="text" id="featured_image" name="featured_image"
                                   value="{{ page ? page.featuredImage : '' }}"
                                   class="form-input w-full"
                                   placeholder="https://ornek.com/gorsel.jpg">
                            {% if page and page.featuredImage %}
                                <div class="mt-2">
                                    <img src="{{ page.featuredImage }}" alt="Sayfa görseli" class="w-full h-32 object-cover rounded-lg border border-gray-200">
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>

                {# SEO Card #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-search text-gray-400 mr-2"></i> SEO Ayarları
                        </h3>
                    </div>
                    <div class="card-body space-y-4">
                        {# SEO Title #}
                        <div>
                            <label for="seo_title" class="form-label">SEO Başlık</label>
                            <input type="text" id="seo_title" name="seo_title"
                                   value="{{ page ? page.seoTitle : '' }}"
                                   class="form-input w-full"
                                   maxlength="60"
                                   placeholder="Arama motorlarında görünecek başlık">
                            <p class="text-xs text-gray-500 mt-1">Maksimum 60 karakter önerilir.</p>
                        </div>

                        {# SEO Description #}
                        <div>
                            <label for="seo_description" class="form-label">SEO Açıklama</label>
                            <textarea id="seo_description" name="seo_description" rows="3"
                                      class="form-input w-full"
                                      maxlength="160"
                                      placeholder="Arama motorlarında görünecek açıklama">{{ page ? page.seoDescription : '' }}</textarea>
                            <p class="text-xs text-gray-500 mt-1">Maksimum 160 karakter önerilir.</p>
                        </div>
                    </div>
                </div>
            </div>

            {# Right column (4/12) #}
            <div class="lg:col-span-4 space-y-6">
                {# Settings Card #}
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="fas fa-cog text-gray-400 mr-2"></i> Sayfa Ayarları
                        </h3>
                    </div>
                    <div class="card-body space-y-4">
                        {# Status #}
                        <div>
                            <label for="status" class="form-label">Durum</label>
                            <select id="status" name="status" class="form-input w-full">
                                <option value="draft" {{ (page and page.status == 'draft') or not page ? 'selected' : '' }}>Taslak</option>
                                <option value="published" {{ page and page.status == 'published' ? 'selected' : '' }}>Yayında</option>
                            </select>
                        </div>

                        {# Template #}
                        <div>
                            <label for="template" class="form-label">Şablon</label>
                            <select id="template" name="template" class="form-input w-full">
                                <option value="default" {{ (page and page.template == 'default') or not page ? 'selected' : '' }}>Varsayılan</option>
                                <option value="full-width" {{ page and page.template == 'full-width' ? 'selected' : '' }}>Tam Genişlik</option>
                                <option value="sidebar" {{ page and page.template == 'sidebar' ? 'selected' : '' }}>Kenar Çubuklu</option>
                                <option value="landing" {{ page and page.template == 'landing' ? 'selected' : '' }}>Landing Page</option>
                                <option value="contact" {{ page and page.template == 'contact' ? 'selected' : '' }}>İletişim</option>
                            </select>
                        </div>

                        {# Position #}
                        <div>
                            <label for="position" class="form-label">Sıra</label>
                            <input type="number" id="position" name="position"
                                   value="{{ page ? page.position : 0 }}"
                                   class="form-input w-full"
                                   min="0">
                            <p class="text-xs text-gray-500 mt-1">Küçük sayı önce görünür.</p>
                        </div>
                    </div>
                </div>

                {# Action Buttons #}
                <div class="flex flex-col gap-3">
                    <button type="submit" class="btn-primary w-full justify-center">
                        <i class="fas fa-save mr-2"></i>
                        {{ page ? 'Güncelle' : 'Kaydet' }}
                    </button>
                    <a href="{{ path('admin_pages') }}" class="btn-outline w-full justify-center">
                        <i class="fas fa-arrow-left mr-2"></i> Geri Dön
                    </a>
                </div>

                {% if page %}
                    <div class="text-sm text-gray-500 text-center">
                        <p>Oluşturulma: {{ page.createdAt|date('d.m.Y H:i') }}</p>
                        <p>Son güncelleme: {{ page.updatedAt|date('d.m.Y H:i') }}</p>
                    </div>
                {% endif %}
            </div>
        </div>
    </form>
{% endblock %}
