{% extends 'base.html' %}{% load static %}
{% block title %}Create Advert — Unity Nation{% endblock %}
{% block content %}
<div class="container pg-wrap" style="max-width:640px;margin:0 auto">
<div class="pg-hd">
  <div class="ey">Earn</div>
  <h1>Create an Advert</h1>
  <p>Post a social media task for members to complete — grow your audience and earn rewards together.</p>
</div>

<!-- How it works -->
<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:28px">
  <div style="background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center">
    <div style="font-size:1.5rem;margin-bottom:8px">📣</div>
    <div style="font-family:var(--ff);font-size:.86rem;font-weight:700;margin-bottom:4px">Post Advert</div>
    <div style="font-size:.76rem;color:var(--muted)">Set platform, username &amp; target followers</div>
  </div>
  <div style="background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center">
    <div style="font-size:1.5rem;margin-bottom:8px">👥</div>
    <div style="font-family:var(--ff);font-size:.86rem;font-weight:700;margin-bottom:4px">Members Follow</div>
    <div style="font-size:.76rem;color:var(--muted)">Other members complete your task &amp; submit proof</div>
  </div>
  <div style="background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px;text-align:center">
    <div style="font-size:1.5rem;margin-bottom:8px">🚀</div>
    <div style="font-family:var(--ff);font-size:.86rem;font-weight:700;margin-bottom:4px">Grow Audience</div>
    <div style="font-size:.76rem;color:var(--muted)">Your social following grows fast</div>
  </div>
</div>

<div class="card">
  <form method="post" action="{% url 'create_advert' %}">{% csrf_token %}
    <div class="form-group">
      <label class="form-label"><i class="fas fa-mobile-alt" style="color:var(--vlt);margin-right:5px"></i>Social Media Platform *</label>
      <select name="social_media_name" class="form-control" required>
        <option value="">Select platform…</option>
        <option value="Instagram"><i class="fab fa-instagram"></i> Instagram</option>
        <option value="YouTube">YouTube</option>
        <option value="TikTok">TikTok</option>
        <option value="Twitter / X">Twitter / X</option>
        <option value="Facebook">Facebook</option>
        <option value="Telegram">Telegram</option>
        <option value="WhatsApp">WhatsApp</option>
      </select>
    </div>
    <div class="form-group">
      <label class="form-label"><i class="fas fa-at" style="color:var(--teal);margin-right:5px"></i>Your Username on that Platform *</label>
      <input type="text" name="username" class="form-control" placeholder="e.g. @yourhandle" required>
    </div>
    <div class="form-group">
      <label class="form-label"><i class="fas fa-link" style="color:var(--muted);margin-right:5px"></i>Profile / Channel URL</label>
      <input type="url" name="url" class="form-control" placeholder="https://…">
    </div>
    <div class="form-group">
      <label class="form-label"><i class="fas fa-users" style="color:var(--gold);margin-right:5px"></i>Target Followers / Subscribers *</label>
      <input type="number" name="desired_followers" class="form-control" placeholder="e.g. 100" min="1" required>
    </div>
    <div class="form-group">
      <label class="form-label"><i class="fas fa-align-left" style="color:var(--muted);margin-right:5px"></i>Additional Instructions (optional)</label>
      <textarea name="description" class="form-control" placeholder="Any specific instructions for members…"></textarea>
    </div>
    <hr>
    <div style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px">
      <div>
        <div style="font-size:.76rem;color:var(--muted);margin-bottom:3px">Your Balance</div>
        <div style="font-family:var(--ff);font-size:1.3rem;font-weight:700;color:var(--teal)">${{ user.wallet_balance|floatformat:2 }}</div>
      </div>
      <button type="submit" class="btn btn-violet btn-lg"><i class="fas fa-bullhorn"></i>Post Advert</button>
    </div>
  </form>
</div>
</div>
{% endblock %}