{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}Edit Friend Code{% endblock %}

{% block content %}
  <h1 class="text-3xl font-bold mb-4">Edit Friend Code</h1>
  
  <!-- Display the friend code as plain text -->
  <div class="mb-4 p-4 bg-base-100 dark:bg-base-900 rounded shadow">
    <span class="font-mono text-sm sm:text-base">Friend Code: {{ friend_code.friend_code }}</span>
  </div>

  <!-- Update form for editing the in-game name -->
  <form method="post" novalidate id="edit-friendcode-form">
    {% csrf_token %}
    <div class="mb-4">
      {{ form.in_game_name.as_widget }}
      {% if form.in_game_name.errors %}
        <div class="text-red-600 text-sm">
          {{ form.in_game_name.errors }}
        </div>
      {% endif %}
    </div>
  </form>

  <div class="flex flex-col md:flex-row justify-between items-center mt-6">
    <!-- Left group: Set Default & Delete -->
    <div class="flex items-center space-x-4">
      <form method="post" action="{% url 'change_default_friend_code' friend_code.id %}" class="inline">
        {% csrf_token %}
        {% if not friend_code.is_default %}
          <button type="submit" class="btn btn-secondary">Set as Default</button>
        {% else %}
          <button type="button" class="btn btn-secondary" disabled>Default</button>
        {% endif %}
      </form>
      <a href="{% url 'delete_friend_code' friend_code.id %}" class="btn btn-error">Delete</a>
    </div>

    <!-- Right group: Cancel & Update -->
    <div class="flex items-center space-x-4 mt-4 md:mt-0">
      <a href="{% url 'dashboard' %}?tab=friend_codes" class="btn btn-secondary">Cancel</a>
      <!-- This update button is outside the form but tied to it with the HTML5 'form' attribute -->
      <button type="submit" form="edit-friendcode-form" class="btn btn-primary">Update</button>
    </div>
  </div>
{% endblock %}