ExForm

<VBox class="sapUiMediumMargin">


  <!-- ============================================================ -->
  <!--  01 — Tek kolon, label üst, sade                              -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="01 · Tek Kolon (Basic)" level="h3" variant="section" />
  <ux7:ExForm title="Kişisel Bilgiler" columns="1" labelPosition="top" submit=".onFormSubmit">
    <ux7:ExInput label="Ad Soyad" placeholder="Tam adınız" required="true" />
    <ux7:ExInput label="E-posta" placeholder="ornek@mail.com" type="email" required="true" />
    <ux7:ExInput label="Telefon" placeholder="+90 555 000 00 00" />
    <ux7:ExDatePicker label="Doğum Tarihi" mode="single" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  02 — İki kolon, label üst — en yaygın layout                  -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="02 · İki Kolon · Label Üst" level="h3" variant="section" />
  <ux7:ExForm title="Adres Bilgileri" description="Fatura ve teslimat adresinizi giriniz." columns="2" labelPosition="top" submit=".onFormSubmit">
    <ux7:ExInput label="Cadde / Sokak" required="true" />
    <ux7:ExInput label="Bina / Daire No" />
    <ux7:ExInput label="İlçe" required="true" />
    <ux7:ExInput label="Şehir" required="true" />
    <ux7:ExInput label="Posta Kodu" placeholder="00000" />
    <ux7:ExSelect label="Ülke" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  03 — İki kolon, label SOL                                     -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="03 · İki Kolon · Label Sol" level="h3" variant="section" />
  <ux7:ExForm title="Şirket Profili" eyebrow="HESAP AYARLARI" columns="2" labelPosition="left" submit=".onFormSubmit">
    <ux7:ExInput label="Şirket Adı" required="true" />
    <ux7:ExInput label="Vergi No" placeholder="10 haneli" />
    <ux7:ExInput label="Web Sitesi" placeholder="https://" />
    <ux7:ExInput label="Telefon" />
    <ux7:ExSelect label="Sektör" />
    <ux7:ExSelect label="Çalışan Sayısı" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  04 — Üç kolon + eyebrow + description + sticky footer         -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="04 · Üç Kolon · Sticky Footer + Full Header" level="h3" variant="section" />
  <ux7:ExForm title="Yeni Ürün" eyebrow="ÜRÜN YÖNETİMİ · KATALOG" description="Ürünü kataloğa eklemek için tüm zorunlu alanları doldurun. Değişiklikler ⌘+S ile kaydedilir." columns="3" labelPosition="top" stickyFooter="true" submitLabel="Ürünü Yayınla" cancelLabel="İptal" submit=".onFormSubmit" cancel=".onFormCancel">
    <ux7:ExInput label="Ürün Adı" required="true" />
    <ux7:ExInput label="SKU" placeholder="PRD-2024-001" />
    <ux7:ExInput label="Barkod" placeholder="EAN-13" />
    <ux7:ExInput label="Fiyat" type="number" required="true" placeholder="0.00" />
    <ux7:ExSelect label="Para Birimi" />
    <ux7:ExInput label="Stok Adedi" type="number" />
    <ux7:ExSelect label="Kategori" required="true" />
    <ux7:ExSelect label="Marka" />
    <ux7:ExDatePicker label="Yayın Tarihi" mode="single" />
    <ux7:ExToggle label="Aktif" />
    <ux7:ExToggle label="Öne Çıkar" />
    <ux7:ExToggle label="İndirimde" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  05 — Density: COMPACT (dense liste odaklı)                    -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="05 · Density: Compact" level="h3" variant="section" />
  <ux7:ExForm title="Filtre Ayarları" description="Veri tablosunu filtrelemek için kriterleri belirleyin." columns="4" density="compact" labelPosition="top" submitLabel="Filtrele" cancelLabel="Sıfırla" submit=".onFormSubmit" cancel=".onFormCancel">
    <ux7:ExInput label="Müşteri No" />
    <ux7:ExInput label="Sipariş No" />
    <ux7:ExSelect label="Durum" />
    <ux7:ExSelect label="Bölge" items="{/regions}" />
    <ux7:ExDatePicker label="Başlangıç" mode="single" />
    <ux7:ExDatePicker label="Bitiş" mode="single" />
    <ux7:ExInput label="Min Tutar" type="number" />
    <ux7:ExInput label="Max Tutar" type="number" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  06 — Density: SPACIOUS (premium / wizard hissiyatı)           -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="06 · Density: Spacious" level="h3" variant="section" />
  <ux7:ExForm title="Hesabınızı Oluşturun" eyebrow="ADIM 1 / 3" description="Birkaç dakika içinde hesabınızı oluşturun. Bilgileriniz güvende." columns="1" density="spacious" labelPosition="top" submitLabel="Devam Et" showCancel="false" submit=".onFormSubmit">
    <ux7:ExInput label="E-posta adresiniz" required="true" type="email" />
    <ux7:ExInput label="Şifre" required="true" type="password" />
    <ux7:ExInput label="Şifre (tekrar)" required="true" type="password" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  07 — Custom Footer (kendi butonların)                          -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="07 · Custom Footer Buttons" level="h3" variant="section" />
  <ux7:ExForm title="Doküman Onayı" description="Devam etmeden önce belgeyi inceleyin." columns="2" labelPosition="top" submit=".onFormSubmit">
    <ux7:ExInput label="Doküman No" />
    <ux7:ExInput label="Başvuru Sahibi" />
    <ux7:ExSelect label="Doküman Tipi" items="{/documentTypes}" />
    <ux7:ExDatePicker label="Tarih" mode="single" />
    <ux7:footer>
      <ux7:ExButton text="Reddet" type="tactile-charcoal" press=".onReject" />
      <ux7:ExButton text="Beklet" type="ghost" press=".onHold" />
      <ux7:ExButton text="Onayla" type="tactile" press=".onApprove" />
    </ux7:footer>
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  08 — Loading State (skeleton)                                  -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="08 · Loading Skeleton" level="h3" variant="section" />
  <ux7:ExForm title="Müşteri Bilgileri" description="Backend'den veri çekiliyor…" columns="2" loading="true" showSubmit="false" showCancel="false">
    <!-- items boş bırakılabilir; skeleton fake field çizer -->
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  09 — State badge — programmatic                                -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="09 · State Badge (saving / saved / error)" level="h3" variant="section" />
  <HBox class="sapUiSmallMarginBottom">
    <Button text="Idle" press="onStateIdle" class="sapUiTinyMarginEnd" />
    <Button text="Saving" press="onStateSaving" class="sapUiTinyMarginEnd" />
    <Button text="Saved" press="onStateSaved" class="sapUiTinyMarginEnd" />
    <Button text="Error" press="onStateError" />
  </HBox>
  <ux7:ExForm id="stateForm" title="Otomatik Kaydet Testi" description="Üstteki butonlarla state badge'ini değiştir." columns="2" labelPosition="top" submit=".onFormSubmit">
    <ux7:ExInput label="Başlık" />
    <ux7:ExInput label="Kategori" />
    <ux7:ExInput label="Açıklama" />
    <ux7:ExSelect label="Görünürlük" items="{/visibility}" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  10 — Error Summary trigger                                     -->
  <!--      Tüm alanlar required — Submit'e basınca hata bandı açılır  -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="10 · Error Summary (tüm alanlar required)" level="h3" variant="section" />
  <ux7:ExForm title="Hata Özeti Testi" description="Boş submit'le hata banner'ı tetiklenir. Bir chip'e tıklayarak ilgili alana git." columns="2" labelPosition="top" submit=".onFormSubmit">
    <ux7:ExInput label="Ad" required="true" />
    <ux7:ExInput label="Soyad" required="true" />
    <ux7:ExInput label="E-posta" required="true" type="email" />
    <ux7:ExInput label="Telefon" required="true" />
    <ux7:ExSelect label="Ülke" required="true" items="{/countries}" />
    <ux7:ExDatePicker label="Tarih" mode="single" required="true" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  11 — Sadece başlık yok, minimalist                             -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="11 · Başlıksız (Embed Modu)" level="h3" variant="section" />
  <ux7:ExForm columns="3" labelPosition="top" submit=".onFormSubmit">
    <ux7:ExInput label="Anahtar" />
    <ux7:ExInput label="Değer" />
    <ux7:ExSelect label="Tip" items="{/types}" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  12 — Minik form (showCancel=false, tek aksiyon)               -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="12 · Tek Aksiyon — Şifre Değiştir" level="h3" variant="section" />
  <ux7:ExForm title="Şifre Değiştir" columns="1" labelPosition="top" showCancel="false" submitLabel="Şifreyi Güncelle" submit=".onFormSubmit">
    <ux7:ExInput label="Mevcut Şifre" type="password" required="true" />
    <ux7:ExInput label="Yeni Şifre" type="password" required="true" />
    <ux7:ExInput label="Yeni Şifre (Tekrar)" type="password" required="true" />
  </ux7:ExForm>


  <!-- ============================================================ -->
  <!--  13 — Premium: hepsi bir arada                                  -->
  <!-- ============================================================ -->
  <ux7:ExTitle text="13 · Premium Combo (her şey aktif)" level="h3" variant="section" />
  <ux7:ExForm title="Sipariş Oluştur" eyebrow="SATIŞ · SİPARİŞ YÖNETİMİ" description="Müşteri, ürün ve teslimat bilgilerini girin. Tüm değişiklikler otomatik takip edilir." columns="3" labelPosition="top" density="comfortable" stickyFooter="true" submitLabel="Siparişi Onayla" cancelLabel="Taslak Kaydet" submit=".onFormSubmit" cancel=".onFormCancel">
    <ux7:ExSelect label="Müşteri" required="true" items="{/customers}" />
    <ux7:ExInput label="Sipariş No" placeholder="otomatik atanır" />
    <ux7:ExDatePicker label="Sipariş Tarihi" mode="single" required="true" />
    <ux7:ExSelect label="Ürün" required="true" items="{/products}" />
    <ux7:ExInput label="Adet" type="number" required="true" placeholder="1" />
    <ux7:ExInput label="Birim Fiyat" type="number" />
    <ux7:ExSelect label="Para Birimi" items="{/currencies}" />
    <ux7:ExSelect label="KDV Oranı" items="{/taxRates}" />
    <ux7:ExInput label="İndirim %" type="number" />
    <ux7:ExInput label="Teslimat Adresi" required="true" />
    <ux7:ExSelect label="Kargo Firması" items="{/shippingCompanies}" />
    <ux7:ExDatePicker label="Teslimat Tarihi" mode="single" />
    <ux7:ExToggle label="Acil Sipariş" />
    <ux7:ExToggle label="Hediye Paketi" />
    <ux7:ExInput label="Notlar" />
  </ux7:ExForm>


</VBox>