{% extends 'base.html' %}{% load static %}
{% block title %}Add Service — Unity Nation{% endblock %}
{% block content %}
<div class="container pg-wrap" style="max-width:640px;margin:0 auto">
<div style="margin-bottom:18px"><a href="{% url 'merchant_dashboard' %}" style="color:var(--muted);font-size:.83rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px"><i class="fas fa-arrow-left"></i>Merchant Dashboard</a></div>
<h1 style="font-family:var(--ff);font-size:1.8rem;font-weight:700;letter-spacing:-.025em;margin-bottom:6px">Add Service</h1>
<p style="color:var(--muted);margin-bottom:26px">List a new service in the Unity Nation marketplace.</p>
<div class="card">
<form method="post" action="{% url 'add_service' %}" enctype="multipart/form-data">{% csrf_token %}
  <div class="form-group"><label class="form-label"><i class="fas fa-tag" style="color:var(--vlt);margin-right:5px"></i>Service Name *</label><input type="text" name="name" class="form-control" placeholder="Name your service" required value="{{ form.name.value|default:'' }}"></div>
  <div class="form-group"><label class="form-label"><i class="fas fa-align-left" style="color:var(--muted);margin-right:5px"></i>Description *</label><textarea name="description" class="form-control" placeholder="Describe your service in detail — what's included, process, deliverables…" required>{{ form.description.value|default:'' }}</textarea></div>
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
    <div class="form-group"><label class="form-label"><i class="fas fa-dollar-sign" style="color:var(--teal);margin-right:5px"></i>Price (USD) *</label><input type="number" name="price" class="form-control" placeholder="0.00" step="0.01" min="0.01" required value="{{ form.price.value|default:'' }}"></div>
    <div class="form-group"><label class="form-label"><i class="fas fa-clock" style="color:var(--muted);margin-right:5px"></i>Delivery Time</label><input type="text" name="delivery_time" class="form-control" placeholder="e.g. 2–3 business days"></div>
  </div>
  <div class="form-group"><label class="form-label"><i class="fas fa-folder" style="color:var(--muted);margin-right:5px"></i>Category</label><input type="text" name="category" class="form-control" placeholder="e.g. Design, Writing, Tech Support…" value="{{ form.category.value|default:'' }}"></div>
  <div class="form-group">
    <label class="form-label"><i class="fas fa-image" style="color:var(--muted);margin-right:5px"></i>Service Image</label>
    <input type="file" name="image" class="form-control" accept="image/*" id="imgInp">
    <div id="imgPrev" style="display:none;margin-top:10px"><img id="prevImg" style="max-height:180px;border-radius:9px;border:1px solid var(--border)"></div>
  </div>
  <hr style="margin:20px 0">
  <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px">
    <a href="{% url 'merchant_dashboard' %}" class="btn btn-ghost"><i class="fas fa-times"></i>Cancel</a>
    <button type="submit" class="btn btn-violet btn-lg"><i class="fas fa-plus"></i>Add Service</button>
  </div>
</form>
</div>
</div>
<script>document.getElementById('imgInp')?.addEventListener('change',function(){const f=this.files[0];if(f){const r=new FileReader();r.onload=e=>{document.getElementById('prevImg').src=e.target.result;document.getElementById('imgPrev').style.display='block'};r.readAsDataURL(f)}});</script>
{% endblock %}