{% extends 'base.html' %}

{% block title %}My Friend Codes{% endblock %}

{% block content %}
<div class="container mx-auto max-w-xl mt-6">
  {# Display messages if there are any. #}
  {% if messages %}
    {% for message in messages %}
      <div class="alert alert-{{ message.tags }} mb-4">
        {{ message }}
      </div>
    {% endfor %}
  {% endif %}

  <h1 class="text-3xl font-bold mb-4">My Friend Codes</h1>
  
  {% if friend_codes %}
    <ul class="space-y-2">
      {% for code in friend_codes %}
      <li class="flex items-center justify-between {% if user.default_friend_code and code.id == user.default_friend_code.id %}bg-green-100{% else %}bg-base-100{% endif %} p-4 rounded shadow">
        <div>
          <span class="font-mono dark:text-base-100">{{ code.friend_code }}</span>
          {% if user.default_friend_code and code.id == user.default_friend_code.id %}
            <span class="badge badge-success ml-2">Default</span>
          {% endif %}
        </div>
        <div class="flex items-center space-x-2">
          {% if user.default_friend_code and code.id == user.default_friend_code.id %}
            <button type="button" class="btn btn-secondary btn-sm" disabled>Set as Default</button>
          {% else %}
            <form method="post" action="{% url 'change_default_friend_code' code.id %}">
              {% csrf_token %}
              <button type="submit" class="btn btn-secondary btn-sm">Set as Default</button>
            </form>
          {% endif %}
          <a href="{% url 'delete_friend_code' code.id %}" class="btn btn-error btn-sm">Delete</a>
        </div>
      </li>
      {% endfor %}
    </ul>
  {% else %}
    <p>You do not have any friend codes added yet.</p>
  {% endif %}
  
  <div class="mt-4">
    <a href="{% url 'add_friend_code' %}" class="btn btn-primary">Add a New Friend Code</a>
  </div>
</div>
{% endblock %}