{{ define "form-components" }}

<!-- ============================================
     FORM INPUT EXAMPLES
     ============================================ -->

<section class="my-12 space-y-8">
  <h2>Form Components</h2>

  <!-- Basic Form Group -->
  <div class="form-group">
    <label for="input-text">Text Input</label>
    <input type="text" id="input-text" class="form-input" placeholder="Enter text...">
  </div>

  <!-- Form Group with Error -->
  <div class="form-group error">
    <label for="input-email">Email (with error)</label>
    <input type="email" id="input-email" class="form-input error" value="invalid-email">
    <div class="form-error">{{ i18n "form_invalid_email" }}</div>
  </div>

  <!-- Form Group with Help Text -->
  <div class="form-group">
    <label for="input-password" class="">Password</label>
    <input type="password" id="input-password" class="form-input" placeholder="••••••">
    <div class="form-group-help">{{ i18n "form_password_help" | default "Must be at least 8 characters" }}</div>
  </div>

  <!-- Disabled Input -->
  <div class="form-group">
    <label for="input-disabled">Disabled Input</label>
    <input type="text" id="input-disabled" class="form-input" value="Cannot edit" disabled>
  </div>

  <!-- ============================================
       TEXTAREA EXAMPLES
       ============================================ -->

  <div class="form-group">
    <label for="textarea-message">Message</label>
    <textarea id="textarea-message" class="form-textarea" placeholder="Enter your message..."></textarea>
  </div>

  <!-- ============================================
       SELECT EXAMPLES
       ============================================ -->

  <div class="form-group">
    <label for="select-option">Select an option</label>
    <select id="select-option" class="form-select">
      <option>Choose...</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>

  <!-- ============================================
       CHECKBOX EXAMPLES
       ============================================ -->

  <div class="form-group">
    <label for="agree-terms" class="flex items-center gap-3 cursor-pointer">
      <input type="checkbox" id="agree-terms" class="form-checkbox">
      <span>{{ i18n "form_agree_terms" | default "I agree to the terms" }}</span>
    </label>
  </div>

  <!-- Multiple Checkboxes -->
  <div class="form-group space-y-2">
    <p class="font-semibold">{{ i18n "form_select_interests" | default "Select your interests" }}</p>
    <label for="interest-tech" class="flex items-center gap-3 cursor-pointer">
      <input type="checkbox" id="interest-tech" class="form-checkbox" name="interests">
      <span>{{ i18n "form_interest_tech" | default "Technology" }}</span>
    </label>
    <label for="interest-design" class="flex items-center gap-3 cursor-pointer">
      <input type="checkbox" id="interest-design" class="form-checkbox" name="interests">
      <span>{{ i18n "form_interest_design" | default "Design" }}</span>
    </label>
  </div>

  <!-- ============================================
       RADIO BUTTON EXAMPLES
       ============================================ -->

  <div class="form-group space-y-2">
    <p class="font-semibold">{{ i18n "form_select_preference" | default "Select a preference" }}</p>
    <label for="preference-option-a" class="flex items-center gap-3 cursor-pointer">
      <input type="radio" id="preference-option-a" name="preference" class="form-radio">
      <span>{{ i18n "form_option_a" | default "Option A" }}</span>
    </label>
    <label for="preference-option-b" class="flex items-center gap-3 cursor-pointer">
      <input type="radio" id="preference-option-b" name="preference" class="form-radio">
      <span>{{ i18n "form_option_b" | default "Option B" }}</span>
    </label>
  </div>

  <!-- ============================================
       FORM ROWS (MULTI-COLUMN)
       ============================================ -->

  <div class="form-row">
    <div class="form-group">
      <label for="first-name">{{ i18n "form_first_name" | default "First Name" }}</label>
      <input type="text" id="first-name" class="form-input" placeholder="John">
    </div>
    <div class="form-group">
      <label for="last-name">{{ i18n "form_last_name" | default "Last Name" }}</label>
      <input type="text" id="last-name" class="form-input" placeholder="Doe">
    </div>
  </div>

  <!-- ============================================
       INLINE FORMS
       ============================================ -->

  <div class="form-inline">
    <div class="form-group">
      <label for="search-input">{{ i18n "form_search" | default "Search" }}</label>
      <input type="text" id="search-input" class="form-input" placeholder="Type to search...">
    </div>
    <button class="btn btn-primary">{{ i18n "form_search_btn" | default "Search" }}</button>
  </div>

  <!-- ============================================
       MODALS (DEMO BUTTONS)
       ============================================ -->

  <div class="space-y-3 mt-8">
    <h3>Modal Examples</h3>
    <button class="btn btn-primary" @click="showAlertModal = true">{{ i18n "form_open_alert" | default "Open Alert Modal" }}</button>
    <button class="btn btn-secondary" @click="showConfirmModal = true">{{ i18n "form_open_confirm" | default "Open Confirm Modal" }}</button>
    <button class="btn btn-outline" @click="showContentModal = true">{{ i18n "form_open_content" | default "Open Content Modal" }}</button>
  </div>

  <!-- ============================================
       NOTIFICATIONS (DEMO BUTTONS)
       ============================================ -->

  <div class="space-y-3 mt-8">
    <h3>Notifications</h3>
    <button class="btn btn-primary btn-sm" @click="showToast('success')">Success Toast</button>
    <button class="btn btn-secondary btn-sm" @click="showToast('error')">Error Toast</button>
    <button class="btn btn-sm" style="background-color: #3b82f6; color: white;" @click="showToast('info')">Info Toast</button>
    <button class="btn btn-sm" style="background-color: #f59e0b; color: white;" @click="showToast('warning')">Warning Toast</button>
  </div>

</section>

<!-- ============================================
     ALERT MODAL
     ============================================ -->

<div class="modal" :class="{ active: showAlertModal }" x-show="showAlertModal">
  <div class="modal-backdrop" @click="showAlertModal = false" aria-hidden="true"></div>
  <div class="modal-content modal-sm" role="dialog" aria-labelledby="alert-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
    <div class="modal-header">
      <h3 class="modal-title" id="alert-modal-title">{{ i18n "form_alert_title" | default "Alert" }}</h3>
      <div class="modal-close" @click="showAlertModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
    </div>
    <div class="modal-body">
      <p>{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" @click="showAlertModal = false">{{ i18n "form_ok" | default "OK" }}</button>
    </div>
  </div>
</div>

<!-- ============================================
     CONFIRM MODAL
     ============================================ -->

<div class="modal" :class="{ active: showConfirmModal }" x-show="showConfirmModal">
  <div class="modal-backdrop" @click="showConfirmModal = false" aria-hidden="true"></div>
  <div class="modal-content modal-sm" role="dialog" aria-labelledby="confirm-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
    <div class="modal-header">
      <h3 class="modal-title" id="confirm-modal-title">{{ i18n "form_confirm_title" | default "Confirm Action" }}</h3>
      <div class="modal-close" @click="showConfirmModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
    </div>
    <div class="modal-body">
      <p>{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" @click="showConfirmModal = false">{{ i18n "form_cancel" | default "Cancel" }}</button>
      <button class="btn btn-primary" @click="handleConfirm()">{{ i18n "form_confirm" | default "Confirm" }}</button>
    </div>
  </div>
</div>

<!-- ============================================
     CONTENT MODAL
     ============================================ -->

<div class="modal" :class="{ active: showContentModal }" x-show="showContentModal">
  <div class="modal-backdrop" @click="showContentModal = false" aria-hidden="true"></div>
  <div class="modal-content modal-md" role="dialog" aria-labelledby="content-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)">
    <div class="modal-header">
      <h3 class="modal-title" id="content-modal-title">{{ i18n "form_content_title" | default "Modal with Content" }}</h3>
      <div class="modal-close" @click="showContentModal = false" aria-label="{{ i18n "closeMenu" }}"></div>
    </div>
    <div class="modal-body">
      <p>{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}</p>
      <div class="mt-4">
        <div class="form-group">
          <label for="modal-input">Input in Modal</label>
          <input type="text" id="modal-input" class="form-input" placeholder="Type here...">
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline" @click="showContentModal = false">{{ i18n "form_close" | default "Close" }}</button>
      <button class="btn btn-primary">{{ i18n "form_save" | default "Save" }}</button>
    </div>
  </div>
</div>

{{ end }}