<odoo>
  <!-- Breadcrumb -->
  <template id="widget_breadcrumb" inherit_id="portal.portal_breadcrumbs" priority="30">
    <xpath expr="//ol[hasclass('o_portal_submenu')]" position="inside">
      <li t-elif="page_name == 'widget'" class="breadcrumb-item active">
        Widget
      </li>
    </xpath>
  </template>

  <!-- Portal home entry -->
  <template id="widget_portal_home" inherit_id="portal.portal_my_home">
    <div id="portal_common_category" position="inside">
      <t t-call="portal.portal_docs_entry">
        <t t-set="icon" t-value="'/kj_affiliate_widget/static/src/img/widget_icon.svg'"/>
        <t t-set="title">Job Widget</t>
        <t t-set="url" t-value="'/my/widget'"/>
        <t t-set="text">Embed job listings on your website.</t>
        <t t-set="placeholder_count" t-value="'widget_config_count'"/>
        <t t-set="show_count" t-value="False"/>
      </t>
    </div>
  </template>

  <!-- Widget configuration page -->
  <template id="portal_my_widget">
    <t t-call="portal.portal_layout">
      <t t-set="breadcrumbs_searchbar" t-value="False"/>

      <div class="container py-4">
        <div class="mb-4">
          <h3 class="fw-bold mb-1">Website Widget</h3>
          <p class="text-muted mb-0" style="font-size: 14px;">
            Embed the Karriere-Jura website on your site with a single line of code.
          </p>
        </div>

        <!-- Stats Cards -->
        <div class="row mb-4 g-3">
          <div class="col-md-4">
            <div class="kj-detail-card">
              <div class="kj-card-body text-center py-4">
                <div class="kj-app-icon mx-auto mb-3" style="background: rgba(206,0,0,0.06); color: #ce0000; border-color: rgba(206,0,0,0.1);">
                  <i class="fa fa-eye"/>
                </div>
                <div class="kj-form-label mb-2">Impressions (30d)</div>
                <div class="fw-bold" style="font-size: 28px; color: #ce0000;" t-out="impressions_30d"/>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="kj-detail-card">
              <div class="kj-card-body text-center py-4">
                <div class="kj-app-icon mx-auto mb-3" style="background: rgba(59,130,246,0.06); color: #3b82f6; border-color: rgba(59,130,246,0.1);">
                  <i class="fa fa-mouse-pointer"/>
                </div>
                <div class="kj-form-label mb-2">Clicks (30d)</div>
                <div class="fw-bold" style="font-size: 28px; color: #ce0000;" t-out="clicks_30d"/>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="kj-detail-card">
              <div class="kj-card-body text-center py-4">
                <div class="kj-app-icon mx-auto mb-3" style="background: rgba(5,150,105,0.06); color: #059669; border-color: rgba(5,150,105,0.1);">
                  <i class="fa fa-percent"/>
                </div>
                <div class="kj-form-label mb-2">CTR (30d)</div>
                <div class="fw-bold" style="font-size: 28px; color: #ce0000;"><t t-out="ctr_30d"/>%</div>
              </div>
            </div>
          </div>
        </div>

        <!-- Embed Code -->
        <div class="kj-detail-card mb-4">
          <div class="kj-card-header">
            <div class="kj-card-icon icon-red"><i class="fa fa-code"/></div>
            <h5>Embed Code</h5>
          </div>
          <div class="kj-card-body">
            <p>Copy and paste this code into your website, just before the closing <code>&lt;/body&gt;</code> tag:</p>
            <div class="position-relative">
              <pre class="bg-dark text-light p-3 rounded"><code id="embedCode" t-out="embed_code"/></pre>
              <button class="btn btn-sm btn-outline-light position-absolute top-0 end-0 m-2"
                      onclick="navigator.clipboard.writeText(document.getElementById('embedCode').textContent).then(function(){this.textContent='Copied!';setTimeout(function(){this.textContent='Copy';}.bind(this),2000);}.bind(this))">
                Copy
              </button>
            </div>
          </div>
        </div>

        <!-- Configuration Form -->
        <form action="/my/widget/save" method="POST" enctype="multipart/form-data">
          <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>

          <!-- Widget Mode -->
          <div class="kj-detail-card mb-4">
            <div class="kj-card-header">
              <div class="kj-card-icon icon-amber"><i class="fa fa-sliders"/></div>
              <h5>Widget Mode</h5>
            </div>
            <div class="kj-card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="widget_mode" class="form-label">Display Mode</label>
                  <select name="widget_mode" class="form-select" id="widget_mode">
                    <option value="overlay" t-att-selected="config.widget_mode == 'overlay' and 'selected'">Overlay (Popup)</option>
                    <option value="inline" t-att-selected="config.widget_mode == 'inline' and 'selected'">Inline (Embedded)</option>
                    <option value="grid" t-att-selected="config.widget_mode == 'grid' and 'selected'">Grid (Job Cards)</option>
                    <option value="box" t-att-selected="config.widget_mode == 'box' and 'selected'">Box Widget (Compact)</option>
                  </select>
                  <div class="form-text">
                    <b>Overlay</b>: floating button opens a popup. <b>Inline</b>: embeds the full site in your page. <b>Box</b>: compact job ticker.
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="language" class="form-label">Language</label>
                  <select name="language" class="form-select" id="language">
                    <option value="de" t-att-selected="config.language == 'de' and 'selected'">Deutsch</option>
                    <option value="en" t-att-selected="config.language == 'en' and 'selected'">English</option>
                  </select>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="landing_page" class="form-label">Landing Page</label>
                  <select name="landing_page" class="form-select" id="landing_page">
                    <option value="/" t-att-selected="config.landing_page == '/' and 'selected'">Homepage</option>
                    <option value="/job-offers" t-att-selected="config.landing_page == '/job-offers' and 'selected'">Job Offers</option>
                    <option value="/company-profiles" t-att-selected="config.landing_page == '/company-profiles' and 'selected'">Company Profiles</option>
                  </select>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="primary_color" class="form-label">Primary Color</label>
                  <input type="color" name="primary_color" class="form-control form-control-color"
                         id="primary_color" t-att-value="config.primary_color"/>
                </div>
              </div>
            </div>
          </div>

          <!-- Theme Settings (shared for overlay + inline) -->
          <div class="kj-detail-card mb-4" id="section-theme" data-modes="overlay,inline,grid">
            <div class="kj-card-header">
              <div class="kj-card-icon icon-purple"><i class="fa fa-paint-brush"/></div>
              <h5>Site Theme</h5>
            </div>
            <div class="kj-card-body">
              <p class="text-muted mb-3">Customize how the Karriere-Jura website looks inside your widget.</p>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Base Theme</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <label for="theme_color" class="form-label">Brand Color</label>
                  <input type="color" name="theme_color" class="form-control form-control-color"
                         id="theme_color" t-att-value="config.theme_color or '#c0392b'"/>
                  <div class="form-text">Sets the overall color scheme. All other colors are derived from this.</div>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_font_family" class="form-label">Font</label>
                  <select name="theme_font_family" class="form-select" id="theme_font_family">
                    <option value="system" t-att-selected="config.theme_font_family == 'system' and 'selected'">System Default</option>
                    <option value="open-sans" t-att-selected="config.theme_font_family == 'open-sans' and 'selected'">Open Sans</option>
                    <option value="roboto" t-att-selected="config.theme_font_family == 'roboto' and 'selected'">Roboto</option>
                    <option value="lato" t-att-selected="config.theme_font_family == 'lato' and 'selected'">Lato</option>
                    <option value="montserrat" t-att-selected="config.theme_font_family == 'montserrat' and 'selected'">Montserrat</option>
                    <option value="raleway" t-att-selected="config.theme_font_family == 'raleway' and 'selected'">Raleway</option>
                    <option value="ubuntu" t-att-selected="config.theme_font_family == 'ubuntu' and 'selected'">Ubuntu</option>
                    <option value="merriweather" t-att-selected="config.theme_font_family == 'merriweather' and 'selected'">Merriweather</option>
                    <option value="playfair" t-att-selected="config.theme_font_family == 'playfair' and 'selected'">Playfair Display</option>
                    <option value="pt-sans" t-att-selected="config.theme_font_family == 'pt-sans' and 'selected'">PT Sans</option>
                    <option value="noto-sans" t-att-selected="config.theme_font_family == 'noto-sans' and 'selected'">Noto Sans</option>
                    <option value="source-sans" t-att-selected="config.theme_font_family == 'source-sans' and 'selected'">Source Sans Pro</option>
                  </select>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_font_size" class="form-label">Font Size (px)</label>
                  <input type="number" name="theme_font_size" class="form-control"
                         id="theme_font_size" t-att-value="config.theme_font_size or 14" min="10" max="24"/>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Color Overrides (optional)</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <label for="theme_bg_color" class="form-label">Background</label>
                  <input type="color" name="theme_bg_color" class="form-control form-control-color"
                         id="theme_bg_color" t-att-value="config.theme_bg_color or '#f8f7f5'"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_heading_color" class="form-label">Headings</label>
                  <input type="color" name="theme_heading_color" class="form-control form-control-color"
                         id="theme_heading_color" t-att-value="config.theme_heading_color or '#333333'"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_text_color" class="form-label">Body Text</label>
                  <input type="color" name="theme_text_color" class="form-control form-control-color"
                         id="theme_text_color" t-att-value="config.theme_text_color or '#333333'"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_link_color" class="form-label">Links</label>
                  <input type="color" name="theme_link_color" class="form-control form-control-color"
                         id="theme_link_color" t-att-value="config.theme_link_color or '#c0392b'"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_btn_color" class="form-label">Buttons</label>
                  <input type="color" name="theme_btn_color" class="form-control form-control-color"
                         id="theme_btn_color" t-att-value="config.theme_btn_color or '#c0392b'"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_border_color" class="form-label">Borders</label>
                  <input type="color" name="theme_border_color" class="form-control form-control-color"
                         id="theme_border_color" t-att-value="config.theme_border_color or '#e0e0e0'"/>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Navbar</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <label for="theme_navbar_scheme" class="form-label">Navbar Style</label>
                  <select name="theme_navbar_scheme" class="form-select" id="theme_navbar_scheme">
                    <option value="default" t-att-selected="config.theme_navbar_scheme == 'default' and 'selected'">KJ Default</option>
                    <option value="light" t-att-selected="config.theme_navbar_scheme == 'light' and 'selected'">Light</option>
                    <option value="dark" t-att-selected="config.theme_navbar_scheme == 'dark' and 'selected'">Dark</option>
                    <option value="custom" t-att-selected="config.theme_navbar_scheme == 'custom' and 'selected'">Custom</option>
                  </select>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_navbar_bg" class="form-label">Navbar Background</label>
                  <input type="color" name="theme_navbar_bg" class="form-control form-control-color"
                         id="theme_navbar_bg" t-att-value="config.theme_navbar_bg or '#212529'"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="theme_navbar_text" class="form-label">Navbar Text</label>
                  <input type="color" name="theme_navbar_text" class="form-control form-control-color"
                         id="theme_navbar_text" t-att-value="config.theme_navbar_text or '#ffffff'"/>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Site Footer</h6>
              <div class="row">
                <div class="col-md-3 mb-3">
                  <div class="form-check mt-1">
                    <input type="checkbox" name="theme_site_footer_visible" class="form-check-input"
                           id="theme_site_footer_visible" t-att-checked="config.theme_site_footer_visible and 'checked'" value="1"/>
                    <label for="theme_site_footer_visible" class="form-check-label">Show site footer</label>
                  </div>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="theme_site_footer_scheme" class="form-label">Footer Style</label>
                  <select name="theme_site_footer_scheme" class="form-select" id="theme_site_footer_scheme">
                    <option value="default" t-att-selected="config.theme_site_footer_scheme == 'default' and 'selected'">KJ Default</option>
                    <option value="light" t-att-selected="config.theme_site_footer_scheme == 'light' and 'selected'">Light</option>
                    <option value="dark" t-att-selected="config.theme_site_footer_scheme == 'dark' and 'selected'">Dark</option>
                    <option value="custom" t-att-selected="config.theme_site_footer_scheme == 'custom' and 'selected'">Custom</option>
                  </select>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="theme_site_footer_bg" class="form-label">Footer Background</label>
                  <input type="color" name="theme_site_footer_bg" class="form-control form-control-color"
                         id="theme_site_footer_bg" t-att-value="config.theme_site_footer_bg or '#f8f9fa'"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="theme_site_footer_text" class="form-label">Footer Text</label>
                  <input type="color" name="theme_site_footer_text" class="form-control form-control-color"
                         id="theme_site_footer_text" t-att-value="config.theme_site_footer_text or '#333333'"/>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Content Visibility</h6>
              <div class="row">
                <div class="col-md-3 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="theme_show_search" class="form-check-input"
                           id="theme_show_search" t-att-checked="config.theme_show_search and 'checked'" value="1"/>
                    <label for="theme_show_search" class="form-check-label">Show search bar</label>
                  </div>
                </div>
                <div class="col-md-3 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="theme_show_logo" class="form-check-input"
                           id="theme_show_logo" t-att-checked="config.theme_show_logo and 'checked'" value="1"/>
                    <label for="theme_show_logo" class="form-check-label">Show KJ logo</label>
                  </div>
                </div>
                <div class="col-md-3 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="theme_show_newsletter_popup" class="form-check-input"
                           id="theme_show_newsletter_popup" t-att-checked="config.theme_show_newsletter_popup and 'checked'" value="1"/>
                    <label for="theme_show_newsletter_popup" class="form-check-label">Newsletter popup</label>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Overlay-Specific Settings -->
          <div class="kj-detail-card mb-4" id="section-overlay" data-modes="overlay">
            <div class="kj-card-header">
              <div class="kj-card-icon icon-amber"><i class="fa fa-window-restore"/></div>
              <h5>Overlay Settings</h5>
            </div>
            <div class="kj-card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="position" class="form-label">Button Position</label>
                  <select name="position" class="form-select" id="position">
                    <option value="bottom-right" t-att-selected="config.position == 'bottom-right' and 'selected'">Bottom Right</option>
                    <option value="bottom-left" t-att-selected="config.position == 'bottom-left' and 'selected'">Bottom Left</option>
                    <option value="top-right" t-att-selected="config.position == 'top-right' and 'selected'">Top Right</option>
                    <option value="top-left" t-att-selected="config.position == 'top-left' and 'selected'">Top Left</option>
                  </select>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="text_color" class="form-label">Button Text Color</label>
                  <input type="color" name="text_color" class="form-control form-control-color"
                         id="text_color" t-att-value="config.text_color"/>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="button_style" class="form-label">Button Style</label>
                  <select name="button_style" class="form-select" id="button_style">
                    <option value="pill" t-att-selected="config.button_style == 'pill' and 'selected'">Pill</option>
                    <option value="rounded" t-att-selected="config.button_style == 'rounded' and 'selected'">Rounded</option>
                    <option value="square" t-att-selected="config.button_style == 'square' and 'selected'">Square</option>
                  </select>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="button_text" class="form-label">Button Text</label>
                  <input type="text" name="button_text" class="form-control"
                         id="button_text" t-att-value="config.button_text"/>
                </div>
                <div class="col-md-6 mb-3">
                  <div class="form-check mt-4">
                    <input type="checkbox" name="show_button" class="form-check-input"
                           id="show_button" t-att-checked="config.show_button and 'checked'" value="1"/>
                    <label for="show_button" class="form-check-label">Show floating button</label>
                  </div>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="overlay_radius" class="form-label">Overlay Corners</label>
                  <select name="overlay_radius" class="form-select" id="overlay_radius">
                    <option value="16" t-att-selected="config.overlay_radius == '16' and 'selected'">Rounded (16px)</option>
                    <option value="8" t-att-selected="config.overlay_radius == '8' and 'selected'">Subtle (8px)</option>
                    <option value="0" t-att-selected="config.overlay_radius == '0' and 'selected'">Sharp (0px)</option>
                  </select>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Toolbar</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="show_logo" class="form-check-input"
                           id="show_logo" t-att-checked="config.show_logo and 'checked'" value="1"/>
                    <label for="show_logo" class="form-check-label">Show logo</label>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="toolbar_height" class="form-label">Toolbar Height</label>
                  <select name="toolbar_height" class="form-select" id="toolbar_height">
                    <option value="44" t-att-selected="config.toolbar_height == '44' and 'selected'">Compact (44px)</option>
                    <option value="56" t-att-selected="config.toolbar_height == '56' and 'selected'">Normal (56px)</option>
                    <option value="0" t-att-selected="config.toolbar_height == '0' and 'selected'">Hidden</option>
                  </select>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Backdrop</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <label for="backdrop_opacity" class="form-label">Backdrop Darkness</label>
                  <select name="backdrop_opacity" class="form-select" id="backdrop_opacity">
                    <option value="60" t-att-selected="config.backdrop_opacity == '60' and 'selected'">Normal (60%)</option>
                    <option value="40" t-att-selected="config.backdrop_opacity == '40' and 'selected'">Light (40%)</option>
                    <option value="80" t-att-selected="config.backdrop_opacity == '80' and 'selected'">Dark (80%)</option>
                    <option value="0" t-att-selected="config.backdrop_opacity == '0' and 'selected'">None</option>
                  </select>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="form-check mt-4">
                    <input type="checkbox" name="overlay_border" class="form-check-input"
                           id="overlay_border" t-att-checked="config.overlay_border and 'checked'" value="1"/>
                    <label for="overlay_border" class="form-check-label">Show border</label>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="border_color" class="form-label">Border Color</label>
                  <input type="color" name="border_color" class="form-control form-control-color"
                         id="border_color" t-att-value="config.border_color"/>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Navigation</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <label for="nav_layout" class="form-label">Navigation</label>
                  <select name="nav_layout" class="form-select" id="nav_layout">
                    <option value="hidden" t-att-selected="config.nav_layout == 'hidden' and 'selected'">Hidden</option>
                    <option value="left-sidebar" t-att-selected="config.nav_layout == 'left-sidebar' and 'selected'">Left Sidebar</option>
                  </select>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="nav_bg_color" class="form-label">Sidebar Background</label>
                  <input type="color" name="nav_bg_color" class="form-control form-control-color"
                         id="nav_bg_color" t-att-value="config.nav_bg_color"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="nav_font_color" class="form-label">Sidebar Text</label>
                  <input type="color" name="nav_font_color" class="form-control form-control-color"
                         id="nav_font_color" t-att-value="config.nav_font_color"/>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Widget Footer</h6>
              <div class="row">
                <div class="col-md-3 mb-3">
                  <div class="form-check mt-1">
                    <input type="checkbox" name="show_footer" class="form-check-input"
                           id="show_footer" t-att-checked="config.show_footer and 'checked'" value="1"/>
                    <label for="show_footer" class="form-check-label">Show footer</label>
                  </div>
                </div>
                <div class="col-md-5 mb-3">
                  <input type="text" name="footer_text" class="form-control"
                         id="footer_text" t-att-value="config.footer_text" placeholder="Footer text"/>
                </div>
                <div class="col-md-2 mb-3">
                  <input type="color" name="footer_bg_color" class="form-control form-control-color"
                         id="footer_bg_color" t-att-value="config.footer_bg_color"/>
                </div>
                <div class="col-md-2 mb-3">
                  <input type="color" name="footer_font_color" class="form-control form-control-color"
                         id="footer_font_color" t-att-value="config.footer_font_color"/>
                </div>
              </div>
            </div>
          </div>

          <!-- Inline-Specific Settings -->
          <div class="kj-detail-card mb-4" id="section-inline" data-modes="inline,grid">
            <div class="kj-card-header">
              <div class="kj-card-icon icon-blue"><i class="fa fa-columns"/></div>
              <h5>Inline Settings</h5>
            </div>
            <div class="kj-card-body">
              <div class="row">
                <div class="col-md-4 mb-3">
                  <label for="inline_width" class="form-label">Width</label>
                  <input type="text" name="inline_width" class="form-control"
                         id="inline_width" t-att-value="config.inline_width or '100%'" placeholder="100%"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="inline_height" class="form-label">Initial Height</label>
                  <input type="text" name="inline_height" class="form-control"
                         id="inline_height" t-att-value="config.inline_height or '800px'" placeholder="800px"/>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="inline_border_radius" class="form-label">Border Radius</label>
                  <select name="inline_border_radius" class="form-select" id="inline_border_radius">
                    <option value="0" t-att-selected="config.inline_border_radius == '0' and 'selected'">None</option>
                    <option value="8" t-att-selected="config.inline_border_radius == '8' and 'selected'">Subtle (8px)</option>
                    <option value="16" t-att-selected="config.inline_border_radius == '16' and 'selected'">Rounded (16px)</option>
                  </select>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_auto_resize" class="form-check-input"
                           id="inline_auto_resize" t-att-checked="config.inline_auto_resize and 'checked'" value="1"/>
                    <label for="inline_auto_resize" class="form-check-label">Auto-resize to content height</label>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_show_topbar" class="form-check-input"
                           id="inline_show_topbar" t-att-checked="config.inline_show_topbar and 'checked'" value="1"/>
                    <label for="inline_show_topbar" class="form-check-label">Show login/signup bar</label>
                  </div>
                </div>
              </div>

              <!-- Header &amp; Menu Configuration -->
              <hr class="my-3"/>
              <h6 class="fw-bold mb-3"><i class="fa fa-bars me-2"/>Header &amp; Menu</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_show_header" class="form-check-input"
                           id="inline_show_header" t-att-checked="config.inline_show_header and 'checked'" value="1"/>
                    <label for="inline_show_header" class="form-check-label">Show Header</label>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_show_logo" class="form-check-input"
                           id="inline_show_logo" t-att-checked="config.inline_show_logo and 'checked'" value="1"/>
                    <label for="inline_show_logo" class="form-check-label">Show KJ Logo</label>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_show_menu" class="form-check-input"
                           id="inline_show_menu" t-att-checked="config.inline_show_menu and 'checked'" value="1"/>
                    <label for="inline_show_menu" class="form-check-label">Show Menu</label>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-4 mb-3">
                  <label for="inline_menu_layout" class="form-label">Menu Layout</label>
                  <select name="inline_menu_layout" class="form-select" id="inline_menu_layout">
                    <option value="horizontal" t-att-selected="config.inline_menu_layout == 'horizontal' and 'selected'">Horizontal (top bar)</option>
                    <option value="vertical" t-att-selected="config.inline_menu_layout == 'vertical' and 'selected'">Vertical (left sidebar)</option>
                  </select>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_show_menu_actions" class="form-check-input"
                           id="inline_show_menu_actions" t-att-checked="config.inline_show_menu_actions and 'checked'" value="1"/>
                    <label for="inline_show_menu_actions" class="form-check-label">Show Action Buttons (Wishlist, Post Job)</label>
                  </div>
                </div>
              </div>

              <!-- Individual Menu Items -->
              <h6 class="fw-bold mb-2 mt-2"><i class="fa fa-eye me-2"/>Visible Menu Items</h6>
              <div class="row">
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_show_menu_stellenangebote" class="form-check-input"
                           id="inline_show_menu_stellenangebote" t-att-checked="config.inline_show_menu_stellenangebote and 'checked'" value="1"/>
                    <label for="inline_show_menu_stellenangebote" class="form-check-label">Stellenangebote</label>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_show_menu_firmenprofile" class="form-check-input"
                           id="inline_show_menu_firmenprofile" t-att-checked="config.inline_show_menu_firmenprofile and 'checked'" value="1"/>
                    <label for="inline_show_menu_firmenprofile" class="form-check-label">Firmenprofile</label>
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="inline_show_menu_karriere_tipps" class="form-check-input"
                           id="inline_show_menu_karriere_tipps" t-att-checked="config.inline_show_menu_karriere_tipps and 'checked'" value="1"/>
                    <label for="inline_show_menu_karriere_tipps" class="form-check-label">Karriere-Tipps</label>
                  </div>
                </div>
              </div>

              <!-- Custom Logo -->
              <hr class="my-3"/>
              <h6 class="fw-bold mb-3"><i class="fa fa-image me-2"/>Custom Logo</h6>
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="inline_custom_logo" class="form-label">Upload Logo</label>
                  <input type="file" name="inline_custom_logo" class="form-control"
                         id="inline_custom_logo" accept="image/*"/>
                  <small class="text-muted">PNG, JPG, or SVG. Replaces KJ logo in header.</small>
                  <t t-if="config.inline_custom_logo">
                    <div class="mt-2 d-flex align-items-center gap-2">
                      <img t-att-src="'/api/widget/logo/%s' % config.widget_key" class="border rounded" style="max-height: 40px;"/>
                      <div class="form-check">
                        <input type="checkbox" name="inline_custom_logo_clear" class="form-check-input"
                               id="inline_custom_logo_clear" value="1"/>
                        <label for="inline_custom_logo_clear" class="form-check-label text-danger">Remove logo</label>
                      </div>
                    </div>
                  </t>
                </div>
                <div class="col-md-6 mb-3">
                  <label for="inline_custom_logo_url" class="form-label">Or Logo URL</label>
                  <input type="url" name="inline_custom_logo_url" class="form-control"
                         id="inline_custom_logo_url" t-att-value="config.inline_custom_logo_url or ''"
                         placeholder="https://example.com/logo.png"/>
                  <small class="text-muted">URL to an external logo image.</small>
                </div>
              </div>
            </div>
          </div>

          <!-- Box Widget Settings -->
          <div class="kj-detail-card mb-4" id="section-box" data-modes="box">
            <div class="kj-card-header">
              <div class="kj-card-icon icon-green"><i class="fa fa-th-list"/></div>
              <h5>Box Widget Settings</h5>
            </div>
            <div class="kj-card-body">
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="box_title" class="form-label">Title</label>
                  <input type="text" name="box_title" class="form-control"
                         id="box_title" t-att-value="config.box_title"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="box_job_count" class="form-label">Number of Jobs</label>
                  <input type="number" name="box_job_count" class="form-control"
                         id="box_job_count" t-att-value="config.box_job_count or 5" min="1" max="20"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="box_layout" class="form-label">Layout</label>
                  <select name="box_layout" class="form-select" id="box_layout">
                    <option value="vertical" t-att-selected="config.box_layout == 'vertical' and 'selected'">Vertical</option>
                    <option value="horizontal" t-att-selected="config.box_layout == 'horizontal' and 'selected'">Horizontal</option>
                  </select>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="box_link_target" class="form-label">Links Open In</label>
                  <select name="box_link_target" class="form-select" id="box_link_target">
                    <option value="_blank" t-att-selected="config.box_link_target == '_blank' and 'selected'">New Tab</option>
                    <option value="_parent" t-att-selected="config.box_link_target == '_parent' and 'selected'">Same Window</option>
                  </select>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="box_width" class="form-label">Width</label>
                  <input type="text" name="box_width" class="form-control"
                         id="box_width" t-att-value="config.box_width or '300px'"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label for="box_height" class="form-label">Height</label>
                  <input type="text" name="box_height" class="form-control"
                         id="box_height" t-att-value="config.box_height or 'auto'"/>
                </div>
              </div>

              <h6 class="mt-3 mb-3 text-muted text-uppercase fw-bold" style="font-size:0.75rem; letter-spacing:1px;">Colors</h6>
              <div class="row">
                <div class="col-md-3 mb-3">
                  <label class="form-label">Header BG</label>
                  <input type="color" name="box_header_bg" class="form-control form-control-color"
                         t-att-value="config.box_header_bg or '#c0392b'"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">Header Text</label>
                  <input type="color" name="box_header_text" class="form-control form-control-color"
                         t-att-value="config.box_header_text or '#ffffff'"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">Body BG</label>
                  <input type="color" name="box_body_bg" class="form-control form-control-color"
                         t-att-value="config.box_body_bg or '#ffffff'"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">Link Color</label>
                  <input type="color" name="box_link_color" class="form-control form-control-color"
                         t-att-value="config.box_link_color or '#0645AD'"/>
                </div>
                <div class="col-md-3 mb-3">
                  <div class="form-check">
                    <input type="checkbox" name="box_show_border" class="form-check-input"
                           id="box_show_border" t-att-checked="config.box_show_border and 'checked'" value="1"/>
                    <label for="box_show_border" class="form-check-label">Show border</label>
                  </div>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">Border Color</label>
                  <input type="color" name="box_border_color" class="form-control form-control-color"
                         t-att-value="config.box_border_color or '#dddddd'"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">Footer BG</label>
                  <input type="color" name="box_footer_bg" class="form-control form-control-color"
                         t-att-value="config.box_footer_bg or '#f5f5f5'"/>
                </div>
                <div class="col-md-3 mb-3">
                  <label class="form-label">Footer Text</label>
                  <input type="color" name="box_footer_text" class="form-control form-control-color"
                         t-att-value="config.box_footer_text or '#999999'"/>
                </div>
              </div>
            </div>
          </div>

          <button type="submit" class="btn-kj-primary mt-3 mb-4">
            <i class="fa fa-check-circle"/> Save Settings
          </button>
        </form>

        <!-- Custom Trigger Examples -->
        <div class="kj-detail-card mb-4">
          <div class="kj-card-header">
            <div class="kj-card-icon icon-blue"><i class="fa fa-puzzle-piece"/></div>
            <h5>Custom Trigger Examples</h5>
          </div>
          <div class="kj-card-body">
            <p class="text-muted">
              For overlay mode: disable the floating button and use your own trigger.
              For inline/box mode: the widget renders automatically where you place the code.
            </p>
            <h6 class="mt-3">Link (overlay only)</h6>
            <pre class="bg-dark text-light p-3 rounded"><code>&amp;lt;a href="#" onclick="KJWidget.open(); return false;"&amp;gt;Stellenangebote ansehen&amp;lt;/a&amp;gt;</code></pre>
          </div>
        </div>

        <!-- Widget Key -->
        <div class="kj-detail-card">
          <div class="kj-card-header">
            <div class="kj-card-icon icon-green"><i class="fa fa-key"/></div>
            <h5>Widget Key</h5>
          </div>
          <div class="kj-card-body">
            <p class="text-muted mb-1">Your unique widget key (do not share publicly):</p>
            <code t-out="config.widget_key"/>
          </div>
        </div>
      </div>

      <!-- JS: Toggle section visibility based on widget mode -->
      <script>
        (function() {
          var modeSelect = document.getElementById('widget_mode');
          if (!modeSelect) return;

          function toggleSections() {
            var mode = modeSelect.value;
            document.querySelectorAll('[data-modes]').forEach(function(el) {
              var modes = el.getAttribute('data-modes').split(',');
              el.style.display = modes.indexOf(mode) >= 0 ? '' : 'none';
            });
          }

          modeSelect.addEventListener('change', toggleSections);
          toggleSections();
        })();
      </script>
    </t>
  </template>
</odoo>
