{{ define "admin/pages/hero_form" }}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>{{ if .IsEdit }}Banner Düzenle{{ else }}Yeni Banner Ekle{{ end }}</h2>
        <a href="/admin/content/settings" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Geri Dön
        </a>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <form action="{{ if .IsEdit }}/admin/heroes/{{ .Hero.ID }}/update{{ else }}/admin/heroes/create{{ end }}"
                method="POST" enctype="multipart/form-data">

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="title" class="form-label">Başlık</label>
                        <input type="text" class="form-control" id="title" name="title" value="{{ .Hero.Title }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="color" class="form-label">Renk Kodu (örn. #ffffff)</label>
                        <div class="input-group">
                            <input type="color" class="form-control form-control-color" id="colorPicker"
                                value="{{ .Hero.Color }}" title="Renk seç">
                            <input type="text" class="form-control" id="color" name="color" value="{{ .Hero.Color }}"
                                placeholder="#000000" required>
                        </div>
                        <script>
                            document.getElementById('colorPicker').addEventListener('input', function () {
                                document.getElementById('color').value = this.value;
                            });
                            document.getElementById('color').addEventListener('input', function () {
                                document.getElementById('colorPicker').value = this.value;
                            });
                        </script>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="text1" class="form-label">Alt Başlık (Text1)</label>
                        <input type="text" class="form-control" id="text1" name="text1" value="{{ .Hero.Text1 }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="text2" class="form-label">Açıklama (Text2)</label>
                        <input type="text" class="form-control" id="text2" name="text2" value="{{ .Hero.Text2 }}">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="text4" class="form-label">Buton Metni (Text4)</label>
                        <input type="text" class="form-control" id="text4" name="text4" value="{{ .Hero.Text4 }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="text5" class="form-label">Buton Linki (Text5)</label>
                        <input type="text" class="form-control" id="text5" name="text5" value="{{ .Hero.Text5 }}">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3 mb-3">
                        <label for="width" class="form-label">Genişlik (px)</label>
                        <input type="number" class="form-control" id="width" name="width" value="{{ .Hero.Width }}">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="height" class="form-label">Yükseklik (px)</label>
                        <input type="number" class="form-control" id="height" name="height" value="{{ .Hero.Height }}">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="quality" class="form-label">Kalite (1-100)</label>
                        <input type="number" class="form-control" id="quality" name="quality"
                            value="{{ .Hero.Quality }}" placeholder="80">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="format" class="form-label">Format</label>
                        <select class="form-select" id="format" name="format">
                            <option value="avif" {{ if eq .Hero.Format "avif" }}selected{{ end }}>AVIF (Önerilen)
                            </option>
                            <option value="webp" {{ if eq .Hero.Format "webp" }}selected{{ end }}>WebP</option>
                            <option value="jpg" {{ if eq .Hero.Format "jpg" }}selected{{ end }}>JPG</option>
                            <option value="png" {{ if eq .Hero.Format "png" }}selected{{ end }}>PNG</option>
                        </select>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="image" class="form-label">Resim Yükle</label>
                    <input type="file" class="form-control" id="image" name="image" accept="image/*">
                    {{ if .Hero.Image }}
                    <div class="mt-2">
                        <p>Mevcut Resim: <a href="{{ .Hero.Image }}" target="_blank">{{ .Hero.Image }}</a></p>
                        <img src="{{ .Hero.Image }}" alt="Current Hero Image"
                            style="max-height: 100px; border-radius: 5px;">
                    </div>
                    {{ end }}
                </div>

                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" {{ if or (not
                        .IsEdit) .Hero.IsActive }}checked{{ end }}>
                    <label class="form-check-label" for="is_active">Aktif</label>
                </div>

                <div class="d-flex justify-content-end gap-2">
                    <a href="/admin/content/settings" class="btn btn-light">İptal</a>
                    <button type="submit" class="btn btn-primary">Kaydet</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{ end }}