{% extends 'base.html' %}{% load static %}
{% block title %}Tasks — Unity Nation{% endblock %}
{% block extra_css %}
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.task-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);padding:24px;transition:all var(--tr);position:relative;overflow:hidden}
.task-card::before{content:'';position:absolute;bottom:-20px;right:-20px;width:90px;height:90px;border-radius:50%;opacity:.07;pointer-events:none;background:var(--violet)}
.task-card:hover{border-color:rgba(123,95,230,.4);transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.t-plat{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.t-p-icon{width:36px;height:36px;border-radius:9px;background:rgba(123,95,230,.18);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.t-p-name{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.task-card h3{font-family:var(--ff);font-size:1rem;font-weight:700;margin-bottom:7px}
.task-card .desc{font-size:.82rem;color:var(--muted);margin-bottom:14px;line-height:1.55}
.task-meta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:7px}
.t-reward{font-family:var(--ff);font-weight:700;color:var(--teal);font-size:.95rem}
.t-followers{font-size:.76rem;color:var(--muted)}
.t-time{font-size:.73rem;color:var(--muted);margin-bottom:12px}
{% endblock %}
{% block content %}
<div class="container pg-wrap">
<div style="display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:28px">
  <div>
    <div style="font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--vlt);margin-bottom:7px">Earn</div>
    <h1 style="font-family:var(--ff);font-size:2rem;font-weight:700;letter-spacing:-.025em">Available Tasks</h1>
    <p style="color:var(--muted);margin-top:4px">Complete social media tasks and earn extra rewards.</p>
  </div>
  <a href="{% url 'create_advert' %}" class="btn btn-violet btn-lg"><i class="fas fa-plus"></i>Create Advert</a>
</div>

<!-- Info Banner -->
<div style="background:rgba(0,200,168,.07);border:1px solid rgba(0,200,168,.2);border-radius:var(--r);padding:13px 18px;margin-bottom:24px;display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--muted)">
  <i class="fas fa-info-circle" style="color:var(--teal);flex-shrink:0"></i>
  <span>Follow the account, then click <strong style="color:var(--white)">Complete Task</strong> and submit your username as proof. Rewards are credited to your wallet instantly upon verification.</span>
</div>

<div class="task-grid">
{% for task in tasks %}
<div class="task-card">
  <div class="t-plat">
    <div class="t-p-icon">
      {% 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>
      {% elif 'telegram' in task.advert.social_media_name|lower %}<i class="fab fa-telegram" style="color:#29b6f6"></i>
      {% elif 'whatsapp' in task.advert.social_media_name|lower %}<i class="fab fa-whatsapp" style="color:#25d366"></i>
      {% else %}<i class="fas fa-share-alt" style="color:var(--vlt)"></i>{% endif %}
    </div>
    <span class="t-p-name">{{ task.advert.social_media_name }}</span>
  </div>
  <h3>Follow @{{ task.advert.username }}</h3>
  <div class="desc">Follow this account on {{ task.advert.social_media_name }} and submit your username as proof to earn your reward.</div>
  <div class="task-meta-row">
    <span class="t-reward"><i class="fas fa-coins"></i> Earn Reward</span>
    <span class="t-followers"><i class="fas fa-users"></i> {{ task.advert.desired_followers }} target followers</span>
  </div>
  <div class="t-time"><i class="fas fa-clock"></i> Posted {{ task.created_at|timesince }} ago</div>
  {% if task.advert.url %}<a href="{{ task.advert.url }}" target="_blank" rel="noopener" class="btn btn-ghost btn-sm" style="margin-bottom:9px;width:100%;justify-content:center"><i class="fas fa-external-link-alt"></i>Visit Profile</a>{% endif %}
  <a href="{% url 'complete_task' task.id %}" class="btn btn-violet btn-sm btn-block"><i class="fas fa-check"></i>Complete Task &amp; Earn</a>
</div>
{% empty %}
<div style="grid-column:1/-1;text-align:center;padding:70px 20px;color:var(--muted)">
  <div style="width:80px;height:80px;border-radius:20px;background:rgba(123,95,230,.15);display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 18px"><i class="fas fa-tasks" style="color:var(--vlt)"></i></div>
  <h3 style="font-family:var(--ff);color:var(--white);margin-bottom:8px">No tasks available right now</h3>
  <p style="margin-bottom:22px;max-width:380px;margin-left:auto;margin-right:auto">New tasks are posted by members. Check back soon or create your own advert to grow your social media audience.</p>
  <a href="{% url 'create_advert' %}" class="btn btn-violet btn-lg"><i class="fas fa-bullhorn"></i>Create an Advert</a>
</div>
{% endfor %}
</div>
</div>
{% endblock %}