<div>
    <div style="display: flex; justify-content: end; align-items: center; gap: 10px; margin-bottom: 10px;">
        Düzenlenen diller:
        @foreach ($languages as $language)
            <a href="#" wire:click.prevent="changeLanguage('{{ $language->short }}')"
                wire:key="lang-{{ $language->id }}"
                class="btn btn-sm {{ $selectedLanguage == $language->short ? 'btn-primary' : 'btn-outline-primary' }}">
                {{ strtoupper($language->short) }}
            </a>
        @endforeach
    </div>

    <form>
        <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="title">Başlık</label>
            <div class="col-sm-10">
                <input class="form-control" id="title" type="text" wire:model.live="title" autocomplete="off">
                <div>
                    @error('title')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <label class="col-sm-2 col-form-label" for="description">İçerik</label>
            <div class="col-sm-10">
                <div wire:ignore>
                    <textarea wire:model.live="description" class="form-control"></textarea>
                </div>
                <div>
                    @error('description')
                        <span class="error">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-4">
                <label class="form-label">Buton Başlığı</label>
                <input class="form-control" type="text" wire:model.live="button_title" autocomplete="off">
            </div>
            <div class="col-md-4">
                <label class="form-label">Buton Linki</label>
                <input class="form-control" type="text" wire:model.live="button_link" autocomplete="off">
            </div>
            <div class="col-md-4">
                <label class="form-label">Buton Sayfası</label>
                <select class="form-select" wire:model.live="page_id">
                    <option value="">Seçiniz</option>
                    @foreach($this->pages as $page)
                        <option value="{{ $page->id }}">{{ $page->title }}</option>
                        @if($page->children->count() > 0)
                            @include('partials.sub-pages', ['children' => $page->children, 'prefix' => '--'])
                        @endif
                    @endforeach
                </select>
            </div>
        </div>

        <div class="tab-content rounded-bottom">
            <div class="tab-pane p-3 active preview" role="tabpanel" id="preview-1000">
                    <div class="mb-3">
                        <x-file-manager id="fm1" name="image" title="Görsel" :path="$image_path" />
                    </div>
                    <div class="mb-3">
                        <x-file-manager id="fm2" name="image_mobile" title="Görsel (mobil)" :path="$image_mobile_path" />
                    </div>
            </div>
        </div>

        <button class="btn btn-primary" type="submit" wire:click.prevent="saveAndRedirect" wire:loading.attr="disabled"
            wire:target="save, saveAndRedirect">Kaydet</button>
        <button class="btn btn-primary" type="submit" wire:click.prevent="save" wire:loading.attr="disabled"
            wire:target="save, saveAndRedirect">Kaydet ve Eklemeye Devam Et</button>

    </form>

</div>
