{% extends "admin/base_admin.html" %}
{% set admin_page = "suppliers" %}
{% block title %}New Supplier - Admin - {{ config.APP_NAME }}{% endblock %}

{% block admin_content %}
<div style="max-width:640px">
  <a href="{{ url_for('admin.suppliers') }}" class="text-sm text-slate">&larr; All Suppliers</a>
  <h1 class="text-2xl mt-2 mb-6">Create Supplier</h1>

  <form method="post" class="card" style="padding:1.5rem">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

    <div style="margin-bottom:1rem">
      <label class="form-label">Company Name *</label>
      <input type="text" name="name" class="form-input" required value="{{ data.get('name', '') }}">
    </div>

    <div style="margin-bottom:1rem">
      <label class="form-label">Slug *</label>
      <input type="text" name="slug" class="form-input" required value="{{ data.get('slug', '') }}"
             placeholder="company-name (auto-generated if blank)">
      <p class="form-hint">URL-safe identifier. Leave blank to auto-generate from name.</p>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
      <div>
        <label class="form-label">Country Code *</label>
        <input type="text" name="country_code" class="form-input" required maxlength="3"
               value="{{ data.get('country_code', '') }}" placeholder="DE">
      </div>
      <div>
        <label class="form-label">City</label>
        <input type="text" name="city" class="form-input" value="{{ data.get('city', '') }}">
      </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
      <div>
        <label class="form-label">Region *</label>
        <select name="region" class="form-input" required>
          {% for r in ['Europe', 'North America', 'Latin America', 'Middle East', 'Asia Pacific', 'Africa'] %}
          <option value="{{ r }}" {{ 'selected' if data.get('region') == r }}>{{ r }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="form-label">Category *</label>
        <select name="category" class="form-input" required>
          {% for c in ['manufacturer', 'turnkey', 'consultant', 'hall_builder', 'turf', 'lighting', 'software', 'industry_body', 'franchise'] %}
          <option value="{{ c }}" {{ 'selected' if data.get('category') == c }}>{{ c | replace('_', ' ') | title }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div style="margin-bottom:1rem">
      <label class="form-label">Tier</label>
      <select name="tier" class="form-input">
        {% for t in ['free', 'basic', 'growth', 'pro'] %}
        <option value="{{ t }}" {{ 'selected' if data.get('tier') == t }}>{{ t | capitalize }}</option>
        {% endfor %}
      </select>
    </div>

    <div style="margin-bottom:1rem">
      <label class="form-label">Website</label>
      <input type="url" name="website" class="form-input" value="{{ data.get('website', '') }}" placeholder="https://...">
    </div>

    <div style="margin-bottom:1rem">
      <label class="form-label">Description</label>
      <textarea name="description" class="form-input" rows="3">{{ data.get('description', '') }}</textarea>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
      <div>
        <label class="form-label">Contact Name</label>
        <input type="text" name="contact_name" class="form-input" value="{{ data.get('contact_name', '') }}">
      </div>
      <div>
        <label class="form-label">Contact Email</label>
        <input type="email" name="contact_email" class="form-input" value="{{ data.get('contact_email', '') }}">
      </div>
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem">
      <div>
        <label class="form-label">Contact Role</label>
        <input type="text" name="contact_role" class="form-input" value="{{ data.get('contact_role', '') }}"
               placeholder="e.g. Managing Director">
      </div>
      <div></div>
    </div>

    <div style="margin-bottom:1rem">
      <label class="form-label">Services Offered <span class="form-hint">(comma-separated)</span></label>
      <input type="text" name="services_offered" class="form-input" value="{{ data.get('services_offered', '') }}"
             placeholder="Installation & commissioning, Lighting systems">
    </div>

    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1rem">
      <div>
        <label class="form-label">LinkedIn URL</label>
        <input type="url" name="linkedin_url" class="form-input" value="{{ data.get('linkedin_url', '') }}" placeholder="https://linkedin.com/company/...">
      </div>
      <div>
        <label class="form-label">Instagram URL</label>
        <input type="url" name="instagram_url" class="form-input" value="{{ data.get('instagram_url', '') }}" placeholder="https://instagram.com/...">
      </div>
      <div>
        <label class="form-label">YouTube URL</label>
        <input type="url" name="youtube_url" class="form-input" value="{{ data.get('youtube_url', '') }}" placeholder="https://youtube.com/...">
      </div>
    </div>

    <button type="submit" class="btn" style="width:100%">Create Supplier</button>
  </form>
</div>
{% endblock %}
