<style>
  .lst-preview { background: white; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.5rem; margin-bottom: 1.5rem; max-width: 420px; }
  .lst-preview h3 { font-size: 0.9375rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; }
  .lst-card {
    border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.25rem;
    {% if 'highlight' in active_boosts %}border-color: #1D4ED8; border-width: 2px;{% endif %}
  }
  .lst-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
  .lst-card__logo { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
  .lst-card__name { font-size: 1rem; font-weight: 700; color: #1E293B; }
  .lst-card__loc { font-size: 0.8125rem; color: #64748B; margin-bottom: 0.5rem; }
  .lst-badges { display: flex; gap: 6px; margin-bottom: 0.5rem; }
  .lst-badge {
    font-size: 0.625rem; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .lst-badge--tier { background: #DBEAFE; color: #1D4ED8; }
  .lst-badge--verified { background: #DCFCE7; color: #16A34A; }
  .lst-card__desc { font-size: 0.8125rem; color: #475569; line-height: 1.5; }

  .lst-form { background: white; border: 1px solid #E2E8F0; border-radius: 14px; padding: 1.5rem; }
  .lst-form h3 { font-size: 0.9375rem; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1rem; }
  .lst-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; }
  .lst-full { margin-bottom: 0.75rem; }
  .lst-label { display: block; font-size: 0.75rem; font-weight: 600; color: #475569; margin-bottom: 4px; }
  .lst-input {
    width: 100%; border: 1px solid #E2E8F0; border-radius: 8px; padding: 8px 12px;
    font-size: 0.8125rem; font-family: inherit; box-sizing: border-box;
  }
  .lst-textarea { min-height: 80px; resize: vertical; }
  .lst-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .lst-pill-label {
    font-size: 0.75rem; padding: 4px 10px; border: 1px solid #E2E8F0;
    border-radius: 999px; cursor: pointer; color: #64748B;
  }
  .lst-pill-label:has(input:checked) { background: #1D4ED8; color: white; border-color: #1D4ED8; }
  .lst-pill-label input { display: none; }
  .lst-saved {
    background: #DCFCE7; border: 1px solid #BBF7D0; border-radius: 8px;
    padding: 8px 12px; margin-bottom: 1rem; font-size: 0.8125rem; color: #16A34A; font-weight: 600;
  }
  @media (max-width: 640px) { .lst-row { grid-template-columns: 1fr; } }
</style>

{% if saved is defined and saved %}
<div class="lst-saved">{{ t.sd_lst_saved }}</div>
{% endif %}

<!-- Listing Preview -->
<div class="lst-preview">
  <h3>{{ t.sd_lst_preview_title }}</h3>
  <div id="lst-preview">
    {% include "suppliers/partials/dashboard_listing_preview.html" %}
  </div>
</div>

<!-- Edit Form -->
<div class="lst-form">
  <h3>{{ t.sd_lst_edit_title }}</h3>
  <form id="lst-edit-form" hx-post="{{ url_for('suppliers.dashboard_listing_save') }}" hx-target="#dashboard-content" hx-swap="innerHTML" hx-encoding="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div class="lst-row">
      <div>
        <label class="lst-label">{{ t.sd_lst_company_name }}</label>
        <input type="text" name="name" value="{{ supplier.name }}" class="lst-input"
               hx-get="{{ url_for('suppliers.dashboard_listing_preview') }}" hx-trigger="input changed delay:500ms"
               hx-target="#lst-preview" hx-include="#lst-edit-form">
      </div>
      <div>
        <label class="lst-label">{{ t.sd_lst_tagline }}</label>
        <input type="text" name="tagline" value="{{ supplier.tagline or '' }}" class="lst-input" placeholder="{{ t.sd_lst_tagline_placeholder }}"
               hx-get="{{ url_for('suppliers.dashboard_listing_preview') }}" hx-trigger="input changed delay:500ms"
               hx-target="#lst-preview" hx-include="#lst-edit-form">
      </div>
    </div>

    <div class="lst-full">
      <label class="lst-label">{{ t.sd_lst_short_desc }}</label>
      <textarea name="short_description" class="lst-input lst-textarea"
                hx-get="{{ url_for('suppliers.dashboard_listing_preview') }}" hx-trigger="input changed delay:500ms"
                hx-target="#lst-preview" hx-include="#lst-edit-form">{{ supplier.short_description or '' }}</textarea>
    </div>

    <div class="lst-full">
      <label class="lst-label">{{ t.sd_lst_full_desc }}</label>
      <textarea name="long_description" class="lst-input lst-textarea" style="min-height:120px">{{ supplier.long_description or '' }}</textarea>
    </div>

    <div class="lst-row">
      <div>
        <label class="lst-label">{{ t.sd_lst_website }}</label>
        <input type="url" name="website" value="{{ supplier.website or '' }}" class="lst-input" placeholder="https://..."
               hx-get="{{ url_for('suppliers.dashboard_listing_preview') }}" hx-trigger="input changed delay:500ms"
               hx-target="#lst-preview" hx-include="#lst-edit-form">
      </div>
      <div>
        <label class="lst-label">{{ t.sd_lst_logo }}</label>
        <input type="file" name="logo_file" accept="image/*" class="lst-input" style="padding:6px 8px">
      </div>
    </div>

    <div class="lst-full">
      <label class="lst-label">{{ t.sd_lst_cover_photo }}
        <span style="font-weight:400;color:#94A3B8">{{ t.sd_lst_cover_hint }}</span>
      </label>
      {% if supplier.cover_image %}
      <img src="{{ supplier.cover_image }}" alt="Current cover" style="width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin-bottom:6px;border:1px solid #E2E8F0">
      {% endif %}
      <input type="file" name="cover_file" accept="image/*" class="lst-input" style="padding:6px 8px">
    </div>

    <div class="lst-row">
      <div>
        <label class="lst-label">{{ t.sd_lst_contact_name }}</label>
        <input type="text" name="contact_name" value="{{ supplier.contact_name or '' }}" class="lst-input">
      </div>
      <div>
        <label class="lst-label">{{ t.sd_lst_contact_email }}</label>
        <input type="email" name="contact_email" value="{{ supplier.contact_email or '' }}" class="lst-input">
      </div>
    </div>

    <div class="lst-row">
      <div>
        <label class="lst-label">{{ t.sd_lst_contact_phone }}</label>
        <input type="tel" name="contact_phone" value="{{ supplier.contact_phone or '' }}" class="lst-input">
      </div>
      <div>
        <label class="lst-label">{{ t.sd_lst_years_in_business }}</label>
        <input type="number" name="years_in_business" value="{{ supplier.years_in_business or '' }}" class="lst-input" min="0">
      </div>
    </div>

    <div class="lst-full">
      <label class="lst-label">{{ t.sd_lst_project_count }}</label>
      <input type="number" name="project_count" value="{{ supplier.project_count or '' }}" class="lst-input" min="0" style="max-width:200px">
    </div>

    <div class="lst-full">
      <label class="lst-label">{{ t.sd_lst_service_categories }}</label>
      <div class="lst-pills">
        {% set current_cats = (supplier.service_categories or '').split(',') %}
        {% for cat in service_categories %}
        <label class="lst-pill-label">
          <input type="checkbox" name="service_categories" value="{{ cat }}" {% if cat in current_cats %}checked{% endif %}>
          {{ cat | replace('_', ' ') | title }}
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="lst-full" style="margin-top:0.75rem">
      <label class="lst-label">{{ t.sd_lst_service_area }}</label>
      <div class="lst-pills">
        {% set current_areas = (supplier.service_area or '').split(',') %}
        {% for c in countries %}
        <label class="lst-pill-label">
          <input type="checkbox" name="service_area" value="{{ c }}" {% if c in current_areas %}checked{% endif %}>
          {{ c }}
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="lst-row">
      <div>
        <label class="lst-label">{{ t.sd_lst_contact_role }}</label>
        <input type="text" name="contact_role" value="{{ supplier.contact_role or '' }}" class="lst-input"
               placeholder="e.g. International Sales, Managing Director">
      </div>
      <div></div>
    </div>

    <div class="lst-full" style="margin-top:0.25rem">
      <label class="lst-label">{{ t.sd_lst_services_offered }}</label>
      <div class="lst-pills">
        {% set current_services = (supplier.services_offered or '').split(',') %}
        {% set service_options = [
          'Court design & layout planning',
          'Manufacturing & supply',
          'Installation & commissioning',
          'Lighting systems',
          'Flooring & surfaces',
          'After-sales & warranty',
          'Permitting documentation',
          'Project management',
          'Feasibility studies',
          'Roofing / canopy systems',
        ] %}
        {% for svc in service_options %}
        <label class="lst-pill-label">
          <input type="checkbox" name="services_offered" value="{{ svc }}"
                 {% if svc in current_services %}checked{% endif %}>
          {{ svc }}
        </label>
        {% endfor %}
      </div>
    </div>

    <div class="lst-full" style="margin-top:0.75rem">
      <label class="lst-label">{{ t.sd_lst_social_links }}</label>
      <div style="display:flex;flex-direction:column;gap:0.5rem">
        <input type="url" name="linkedin_url" value="{{ supplier.linkedin_url or '' }}" class="lst-input"
               placeholder="https://linkedin.com/company/...">
        <input type="url" name="instagram_url" value="{{ supplier.instagram_url or '' }}" class="lst-input"
               placeholder="https://instagram.com/...">
        <input type="url" name="youtube_url" value="{{ supplier.youtube_url or '' }}" class="lst-input"
               placeholder="https://youtube.com/...">
      </div>
    </div>

    <div style="margin-top:1.5rem">
      <button type="submit" class="btn">{{ t.sd_lst_save }}</button>
    </div>
  </form>
</div>
