<?xml version="1.0" encoding="utf-8"?>
<odoo>

  <!--
    SSR (server-side render) templates for the affiliate widget's
    interactive components. The widget JS clones these markup
    fragments and only wires events — it never constructs HTML.

    Why: a designer change in KJ flows to every affiliate automatically
    on the next /api/widget/fragment fetch (no widget JS release).

    Pattern: render the *shell* + an inert <template> for each repeated
    element. Widget JS picks up the templates via `[data-kj-tpl="name"]`,
    `.content.cloneNode(true)` them, fills the slots, and appends.
  -->


  <!-- =================================================================
       Faceted filter — chip-bar + dropdown panel
       Mirrors the OWL `JobFacetedFilters` output 1:1 so the theme
       SCSS (job_faceted_filters.scss) styles it without a second copy.

       CONTRACT WITH ORIGIN:
       This template and `kj_custom_website_theme/static/src/xml/
       job_faceted_filters.xml` (OWL) MUST keep the same chip-bar class
       set — visitors switch between origin and widget seeing the
       same layout, and KJ's shared SCSS targets these names.

       The contract is pinned in `tests/test_owl_ssr_parity.py` —
       changing class names here without updating both sides + the
       test's SHARED_CHIP_BAR_TOKENS list will fail CI.

       The `data-kj-*` selectors below are widget-JS-only; the OWL
       side doesn't need them (OWL component holds its own state).
       ================================================================= -->

  <template id="job_faceted_filters_ssr"
            name="KJ Affiliate Widget — Faceted Filter SSR">
    <div class="kj-faceted-filters kj-chip-bar-mode" data-kj-fc="root">
      <div class="kj-chip-bar-wrapper">
        <div class="kj-chip-bar d-flex align-items-center">
          <button type="button"
                  class="kj-weitere-filter-btn btn"
                  data-kj-fc-toggle="">
            <i class="fa fa-sliders"/>
            <span class="kj-weitere-text"
                  t-translation="off">Weitere Filter</span>
          </button>
          <div class="kj-chip-scroll-container flex-grow-1">
            <div class="kj-chip-scroll-inner d-flex gap-2"
                 data-kj-fc-chips=""/>
          </div>
        </div>
        <div class="kj-results-count text-muted small mt-2">
          <strong class="text-danger"
                  data-kj-fc-count="">0</strong>
          <span data-kj-fc-jobs-label=""
                t-translation="off"> Stellenangebote gefunden</span>
        </div>
        <div class="kj-dropdown-panels"
             data-kj-fc-panel=""
             style="display:none;">
          <div class="kj-dropdown-panel shadow-lg bg-white rounded-3 p-3">
            <div class="kj-dropdown-header d-flex justify-content-between align-items-center mb-3">
              <h6 class="mb-0 fw-bold">
                <i class="fa fa-filter text-danger me-2"/>
                <span t-translation="off">Alle Filter</span>
              </h6>
              <button type="button"
                      class="btn btn-link text-muted p-0"
                      data-kj-fc-close=""
                      aria-label="Schließen">
                <i class="fa fa-chevron-up"/>
              </button>
            </div>
            <div class="kj-all-filters-grid" data-kj-fc-grid=""/>
          </div>
        </div>
      </div>

      <!-- Markup template: one facet section. Cloned per facet key.
           Slots filled by JS via [data-kj-fc-*] attributes. -->
      <template data-kj-tpl="section">
        <div class="kj-facet-section mb-3" data-kj-fc-section="">
          <h6 class="fw-bold mb-2 small text-muted">
            <i class="fa fa-tag me-1 text-danger"/>
            <span data-kj-fc-section-label=""/>
          </h6>
          <div class="kj-facet-search mb-2"
               data-kj-fc-section-search=""
               hidden="hidden">
            <input type="text"
                   class="form-control form-control-sm kj-facet-search-input"
                   placeholder=""/>
          </div>
          <div class="kj-facet-values"
               data-kj-fc-section-values=""
               style="max-height: 150px; overflow-y: auto;"/>
        </div>
      </template>

      <!-- Markup template: one value (checkbox + label + count). -->
      <template data-kj-tpl="row">
        <div class="form-check mb-1">
          <input class="form-check-input"
                 type="checkbox"
                 data-kj-fc-input=""/>
          <label class="form-check-label small"
                 data-kj-fc-label=""/>
        </div>
      </template>

      <!-- Markup template: one active-filter chip. -->
      <template data-kj-tpl="chip">
        <span class="kj-chip badge rounded-pill">
          <span class="kj-chip-label" data-kj-fc-chip-label=""/>
          <button type="button"
                  class="kj-chip-remove btn-close btn-close-white"
                  data-kj-fc-chip-remove=""
                  aria-label="remove"/>
        </span>
      </template>

      <!-- Markup template: the "clear all" mini-button shown when
           one or more filters are active. -->
      <template data-kj-tpl="clear-all">
        <button type="button"
                class="kj-chip-clear btn btn-sm btn-link text-decoration-none">
          <span t-translation="off">Alle löschen</span>
        </button>
      </template>
    </div>
  </template>


  <!-- =================================================================
       Apply modal — full 2-column form
       Fetched by the widget on first open, cached, cloned per submit.
       ================================================================= -->

  <template id="apply_modal_ssr"
            name="KJ Affiliate Widget — Apply Modal SSR">
    <div class="kj-w__apply-overlay" data-kj-ap="root">
      <div class="kj-w__apply-dialog"
           role="dialog"
           aria-modal="true"
           aria-labelledby="kjw-apply-title"
           tabindex="-1">
        <header>
          <h3 id="kjw-apply-title"
              data-kj-ap-title=""
              t-translation="off">Auf diese Stelle bewerben</h3>
          <button type="button"
                  class="kj-w__apply-close"
                  data-kj-ap-close=""
                  aria-label="Schließen">&amp;times;</button>
        </header>
        <div class="kj-w__apply-body">
          <aside class="kj-w__apply-position" data-kj-ap-position="">
            <h4 t-translation="off">Position</h4>
            <div class="kj-w__apply-job-name"
                 data-kj-ap-job-name="">…</div>
            <dl>
              <div data-row="company">
                <dt t-translation="off">Unternehmen</dt>
                <dd/>
              </div>
              <div data-row="department">
                <dt t-translation="off">Abteilung</dt>
                <dd/>
              </div>
              <div data-row="function">
                <dt t-translation="off">Funktion</dt>
                <dd/>
              </div>
              <div data-row="city">
                <dt t-translation="off">Standort</dt>
                <dd/>
              </div>
            </dl>
          </aside>
          <form class="kj-w__apply-form" novalidate="novalidate" data-kj-ap-form="">
            <div class="row">
              <div>
                <label t-translation="off">Vorname *</label>
                <input type="text" name="firstname" required="required" autocomplete="given-name"/>
              </div>
              <div>
                <label t-translation="off">Nachname *</label>
                <input type="text" name="lastname" required="required" autocomplete="family-name"/>
              </div>
            </div>
            <label t-translation="off">E-Mail *</label>
            <input type="email" name="email" required="required" autocomplete="email"/>
            <div class="row">
              <div>
                <label t-translation="off">Telefon</label>
                <input type="tel" name="phone" autocomplete="tel"/>
              </div>
              <div>
                <label t-translation="off">LinkedIn-URL</label>
                <input type="text" name="linkedin" autocomplete="off"/>
              </div>
            </div>
            <label t-translation="off">Anschreiben (optional)</label>
            <textarea name="message" rows="3"/>
            <label t-translation="off">Lebenslauf (PDF/DOC/ODT, max. 10 MB)</label>
            <input type="file" name="cv"
                   accept=".pdf,.doc,.docx,.odt,.rtf,.txt,application/pdf"/>
            <label class="kj-w__apply-consent">
              <input type="checkbox" name="consent" required="required"/>
              <span t-translation="off">Ich willige in die Verarbeitung meiner personenbezogenen Daten für diese Bewerbung ein. *</span>
            </label>
            <div class="kj-w__honeypot">
              <label t-translation="off">Website (bitte freilassen)</label>
              <input type="text" name="website" tabindex="-1" autocomplete="off"/>
            </div>
          </form>
        </div>
        <div class="kj-w__apply-status" data-kj-ap-status="" hidden="hidden"/>
        <div class="kj-w__apply-actions">
          <button type="button"
                  class="kj-w__apply-cancel"
                  data-kj-ap-cancel=""
                  t-translation="off">Abbrechen</button>
          <button type="submit"
                  class="kj-w__btn-primary kj-w__apply-submit"
                  data-kj-ap-submit=""
                  t-translation="off">Bewerbung absenden</button>
        </div>
      </div>
    </div>
  </template>


  <!-- =================================================================
       Autocomplete dropdown
       One row per suggestion; cloned per result.
       ================================================================= -->

  <template id="autocomplete_dropdown_ssr"
            name="KJ Affiliate Widget — Autocomplete SSR">
    <!--
      Class names mirror Odoo's core website search autocomplete + KJ's
      `search_autocomplete.scss` overrides (red briefcase icon, location
      right-aligned, "Alle Ergebnisse" footer button). The bundle CSS
      shipped with the fragment styles this without a second copy.

      NB: no `show` class here. Bootstrap's `.show.o_dropdown_menu`
      rule forces `display:block`, which would pin the dropdown open
      with an empty list ("Alle Ergebnisse" always visible). Visibility
      is owned solely by the widget's own `is-open` toggle.
    -->
    <div class="kj-w__ac-dropdown o_dropdown_menu" data-kj-ac="root">
      <ul class="kj-w__ac-list list-unstyled m-0" data-kj-ac-list=""/>
      <button type="button"
              class="dropdown-item kj-w__ac-all"
              data-kj-ac-all=""
              t-translation="off">Alle Ergebnisse</button>

      <!-- Row template: one suggestion. -->
      <template data-kj-tpl="ac-row">
        <li class="dropdown-item kj-w__ac-item" role="option" tabindex="-1">
          <div class="o_search_result_item">
            <i class="o_image_64_contain fa fa-briefcase"/>
            <div class="o_search_result_item_detail">
              <div class="h6 m-0" data-kj-ac-name=""/>
              <span class="btn-link" data-kj-ac-employer=""/>
            </div>
            <div class="flex-shrink-0 ms-auto" data-kj-ac-city-wrap="">
              <b data-kj-ac-city=""/>
            </div>
          </div>
        </li>
      </template>
    </div>
  </template>


  <!-- =================================================================
       Job-alert ("Suche speichern") modal
       Cloned by the widget when the visitor clicks a save-search button.
       Collects an email + frequency; the widget POSTs it to
       /api/widget/job-alert which creates an anonymous job.saved.search
       and sends a double-opt-in verification email. No KJ login needed.
       ================================================================= -->

  <template id="job_alert_modal_ssr"
            name="KJ Affiliate Widget — Job Alert Modal SSR">
    <div class="kj-w__alert-overlay" data-kj-al="root">
      <div class="kj-w__alert-dialog"
           role="dialog"
           aria-modal="true"
           aria-labelledby="kjw-alert-title"
           tabindex="-1">
        <header>
          <h3 id="kjw-alert-title" t-translation="off">Suche speichern</h3>
          <button type="button"
                  class="kj-w__alert-close"
                  data-kj-al-close=""
                  aria-label="Schließen">&amp;times;</button>
        </header>
        <div class="kj-w__alert-body">
          <p class="kj-w__alert-intro" t-translation="off">
            Speichern Sie diese Suche und erhalten Sie neue passende
            Stellenangebote per E-Mail.
          </p>
          <div class="kj-w__alert-criteria"
               data-kj-al-criteria=""
               hidden="hidden">
            <span t-translation="off">Ihre Suche:</span>
            <strong data-kj-al-criteria-text=""/>
          </div>
          <form class="kj-w__alert-form" novalidate="novalidate" data-kj-al-form="">
            <label t-translation="off">E-Mail *</label>
            <input type="email" name="email" required="required"
                   autocomplete="email"/>
            <label t-translation="off">Häufigkeit</label>
            <select name="frequency">
              <option value="daily" t-translation="off">Täglich</option>
              <option value="weekly" t-translation="off">Wöchentlich</option>
            </select>
            <label class="kj-w__alert-consent">
              <input type="checkbox" name="consent" required="required"/>
              <span t-translation="off">Ich willige in die Verarbeitung
                meiner E-Mail-Adresse für diesen Job-Alert ein. *</span>
            </label>
            <div class="kj-w__honeypot">
              <label t-translation="off">Website (bitte freilassen)</label>
              <input type="text" name="website" tabindex="-1" autocomplete="off"/>
            </div>
          </form>
        </div>
        <div class="kj-w__alert-status" data-kj-al-status="" hidden="hidden"/>
        <div class="kj-w__alert-actions">
          <button type="button"
                  class="kj-w__alert-cancel"
                  data-kj-al-cancel=""
                  t-translation="off">Abbrechen</button>
          <button type="submit"
                  class="kj-w__btn-primary kj-w__alert-submit"
                  data-kj-al-submit=""
                  t-translation="off">Suche speichern</button>
        </div>
      </div>
    </div>
  </template>

</odoo>
