{% extends 'base.html' %}{% load static %}
{% block title %}Complete Task — Unity Nation{% endblock %}
{% block content %}
<div class="container pg-wrap" style="max-width:580px;margin:0 auto">
<div style="margin-bottom:28px">
  <a href="{% url 'view_tasks' %}" style="color:var(--muted);font-size:.84rem;text-decoration:none;display:inline-flex;align-items:center;gap:5px;margin-bottom:14px"><i class="fas fa-arrow-left"></i>Back to Tasks</a>
  <h1 style="font-family:var(--ff);font-size:1.9rem;font-weight:700;letter-spacing:-.025em">Complete Task</h1>
  <p style="color:var(--muted);margin-top:5px">Follow the instructions and submit your proof to earn your reward.</p>
</div>

<!-- Task Card -->
<div style="background:linear-gradient(135deg,rgba(123,95,230,.15),rgba(0,200,168,.08));border:1px solid rgba(123,95,230,.3);border-radius:var(--rl);padding:24px;margin-bottom:20px">
  <div style="display:flex;align-items:center;gap:14px;margin-bottom:16px">
    <div style="width:50px;height:50px;border-radius:13px;background:rgba(123,95,230,.25);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0">
      {% if 'instagram' in task.advert.social_media_name|lower %}<i class="fab fa-instagram" style="color:#e1306c"></i>
      {% elif 'youtube' in task.advert.social_media_name|lower %}<i class="fab fa-youtube" style="color:#f00"></i>
      {% elif 'tiktok' in task.advert.social_media_name|lower %}<i class="fab fa-tiktok" style="color:#69c9d0"></i>
      {% elif 'twitter' in task.advert.social_media_name|lower %}<i class="fab fa-twitter" style="color:#1da1f2"></i>
      {% elif 'facebook' in task.advert.social_media_name|lower %}<i class="fab fa-facebook" style="color:#4267b2"></i>
      {% else %}<i class="fas fa-share-alt" style="color:var(--vlt)"></i>{% endif %}
    </div>
    <div>
      <div style="font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px">{{ task.advert.social_media_name }}</div>
      <h2 style="font-family:var(--ff);font-size:1.1rem;font-weight:700">Follow @{{ task.advert.username }}</h2>
    </div>
  </div>

  <!-- Steps -->
  <div style="background:rgba(0,0,0,.2);border-radius:10px;padding:16px;margin-bottom:14px">
    <div style="font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px">Steps to complete</div>
    <div style="display:flex;flex-direction:column;gap:10px">
      <div style="display:flex;align-items:center;gap:11px"><div style="width:24px;height:24px;border-radius:50%;background:rgba(0,200,168,.2);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--teal);flex-shrink:0">1</div><span style="font-size:.85rem;color:var(--muted)">Click the link below to open the profile</span></div>
      <div style="display:flex;align-items:center;gap:11px"><div style="width:24px;height:24px;border-radius:50%;background:rgba(0,200,168,.2);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--teal);flex-shrink:0">2</div><span style="font-size:.85rem;color:var(--muted)">Follow / Subscribe to the account</span></div>
      <div style="display:flex;align-items:center;gap:11px"><div style="width:24px;height:24px;border-radius:50%;background:rgba(0,200,168,.2);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:var(--teal);flex-shrink:0">3</div><span style="font-size:.85rem;color:var(--muted)">Come back and enter your username below</span></div>
    </div>
  </div>

  {% if task.advert.url %}<a href="{{ task.advert.url }}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-bottom:10px"><i class="fas fa-external-link-alt"></i>Open {{ task.advert.social_media_name }} Profile</a>{% endif %}
  {% if task.advert.description %}<div style="background:rgba(255,255,255,.05);border-radius:9px;padding:11px 14px;font-size:.83rem;color:var(--muted)"><strong style="color:var(--white)">Instructions: </strong>{{ task.advert.description }}</div>{% endif %}
</div>

<!-- Submit Form -->
<div class="card">
  <h3 style="font-family:var(--ff);font-size:1rem;font-weight:700;margin-bottom:16px"><i class="fas fa-check-circle" style="color:var(--teal);margin-right:8px"></i>Submit Your Proof</h3>
  <form method="post" action="{% url 'complete_task' task.id %}">{% csrf_token %}
    <div class="form-group">
      <label class="form-label">Your {{ task.advert.social_media_name }} Username</label>
      <input type="text" name="proof_username" class="form-control" placeholder="@yourusername" required>
      <div class="form-help">Enter the username you used to follow this account</div>
    </div>
    <button type="submit" class="btn btn-teal btn-block" style="padding:13px;font-size:.92rem"><i class="fas fa-check"></i>Submit &amp; Claim Reward</button>
  </form>
</div>
</div>
{% endblock %}