{% extends "pos/base.html" %}
{% load static %}

{% block title %}{{ action }} TikTok Shop{% endblock %}
{% block heading %}{{ action }} TikTok Shop{% endblock %}

{% block content %}

<div class="row">
  <div class="col-md-6">
    <div class="card shadow">
      <div class="card-body">
        <form method="post">
          {% csrf_token %}

          <div class="form-group">
            <label>Shop Name <span class="text-danger">*</span></label>
            <input type="text" name="shop_name"
                   value="{{ shop.shop_name|default:'' }}"
                   class="form-control" placeholder="e.g. BluePrimes UK Store" required>
            <small class="text-muted">Apne shop ka naam — sirf aapke reference ke liye</small>
          </div>

          <div class="form-group">
            <label>App Key</label>
            <input type="text" name="app_key"
                   value="{{ shop.app_key|default:global_app_key|default:'' }}"
                   class="form-control" placeholder="TikTok App Key">
            <small class="text-muted">
              Leave empty to use global config value.
              Partner Center → App → Credentials → App Key
            </small>
          </div>

          <div class="form-group">
            <label>App Secret</label>
            <input type="password" name="app_secret"
                   value="{{ shop.app_secret|default:'' }}"
                   class="form-control" placeholder="TikTok App Secret">
            <small class="text-muted">
              Partner Center → App → Credentials → App Secret
            </small>
          </div>

          {% if shop %}
          <div class="form-group">
            <div class="custom-control custom-switch">
              <input type="checkbox" name="is_active" id="is_active"
                     class="custom-control-input"
                     {% if shop.is_active %}checked{% endif %}>
              <label class="custom-control-label" for="is_active">Active</label>
            </div>
          </div>
          {% endif %}

          <button type="submit" class="btn btn-primary">
            <i class="fas fa-save"></i> {{ action }} Shop
          </button>
          <a href="{% url 'integrate:shops_list' %}" class="btn btn-secondary ml-2">
            Cancel
          </a>
        </form>
      </div>
    </div>
  </div>

  {% if action == 'Add' %}
  <div class="col-md-6">
    <div class="card border-info">
      <div class="card-header bg-info text-white py-2">
        <strong><i class="fas fa-info-circle"></i> Setup Steps</strong>
      </div>
      <div class="card-body">
        <ol class="mb-0">
          <li class="mb-2">Shop save karein</li>
          <li class="mb-2">Shops list mein aayenge — <strong>Webhook URL</strong> copy karein</li>
          <li class="mb-2">TikTok Partner Center → App → Manage Webhook → URL paste karein</li>
          <li class="mb-2"><strong>Authorize Shop</strong> button click karein</li>
          <li>TikTok se authorize karein → Done! ✅</li>
        </ol>
      </div>
    </div>
  </div>
  {% endif %}

</div>

{% endblock %}