{% extends "cms/base.html" %}
{% block title %}{% if obj.pk %}Edit Service{% else %}Add Service{% endif %}{% endblock %}
{% block page_title %}{% if obj.pk %}Edit Plugin{% else %}New Plugin{% endif %}{% endblock %}

{% block cms_content %}
<div class="cms-section-header">
  <h2>{% if obj.pk %}{{ obj.title }}{% else %}New Service{% endif %}</h2>
  <a href="{% url 'cms_marketplace' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>
<div class="cms-card">
  <form method="post" enctype="multipart/form-data" class="cms-form">
    {% csrf_token %}
    <div class="row g-3">
      <div class="col-md-8">
        <div class="form-group"><label>Title</label><input type="text" name="title" value="{{ obj.title }}" required></div>
      </div>
      <div class="col-md-4">
        <div class="form-group">
          <label>Category</label>
          <select name="category">
            {% for val, label in category_choices %}
            <option value="{{ val }}" {% if obj.category == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group"><label>Icon Class (FontAwesome e.g. fa-solid fa-rocket)</label><input type="text" name="icon_class" value="{{ obj.icon_class }}"></div>
      </div>
      <div class="col-md-6">
        <div class="form-group"><label>Price Label</label><input type="text" name="price_label" value="{{ obj.price_label }}" placeholder="e.g. From £299/mo"></div>
      </div>
      <div class="col-12">
        <div class="form-group"><label>Short Description</label><textarea name="short_description" rows="2">{{ obj.short_description }}</textarea></div>
      </div>
      <div class="col-12">
        <div class="form-group"><label>Full Description</label><textarea name="full_description" rows="6">{{ obj.full_description }}</textarea></div>
      </div>
      <div class="col-md-6">
        <div class="form-group">
          <label>Icon Image (optional)</label>
          {% if obj.icon_image %}<div style="margin-bottom:.4rem"><img src="{{ obj.icon_image.url }}" style="height:40px;width:40px;object-fit:contain;border-radius:4px"></div>{% endif %}
          <input type="file" name="icon_image" accept="image/*,image/svg+xml">
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group" style="padding-top:.5rem">
          <label class="form-check" style="margin-bottom:.5rem"><input type="checkbox" name="is_featured" {% if obj.is_featured %}checked{% endif %}> Featured</label>
          <label class="form-check"><input type="checkbox" name="is_active" {% if obj.is_active or not obj.pk %}checked{% endif %}> Active</label>
        </div>
      </div>
    </div>
    <div class="mt-3 d-flex gap-2">
      <button type="submit" class="btn-cms">Save Service</button>
      <a href="{% url 'cms_marketplace' %}" class="btn-cms-ghost">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}