{% extends "base.jinja2" %}
{% block title %}Grass Touching Achievements{% endblock %}

{% block body %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid d-flex justify-content-center">
    <a class="navbar-brand" href="/">Grass Touching Captcha</a>
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="/info">Information</a></li>
        <li class="nav-item"><a class="nav-link" href="/leaderboard">Leaderboard</a></li>
        <li class="nav-item"><a class="nav-link" href="/submit_grasstouching">Submit Grass Touching</a></li>
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="/achievements">Achievements</a></li>
        <li class="nav-item"><a class="nav-link" href="/profile">Profile</a></li>
        <li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container my-4">
  <div class="row g-4">
    {% for achievement in achievements %}
      {% set unlocked = grass_touching_count >= achievement[0] %}
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <div class="card h-100 {% if unlocked %}border-success shadow{% else %}border-secondary text-muted{% endif %}">
          <div class="card-body">
            <h5 class="card-title">
              {% if unlocked %}
                ✅ {{ achievement[1] }}
              {% else %}
                🔒 {{ achievement[1] }}
              {% endif %}
            </h5>
            <h6 class="card-subtitle mb-2 {% if unlocked %}text-success{% else %}text-secondary{% endif %}">
              You have to go outside {{ achievement[0] }} times to get this!
            </h6>
            <p class="card-text">{{ achievement[2] }}</p>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
{% endblock %}