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

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

{% block content %}
<div class="container mx-auto max-w-md mt-6">
  <h1 class="text-3xl font-bold mb-4">Add Friend Code</h1>
  <form method="post" class="space-y-4">
    {% csrf_token %}
    {{ form.non_field_errors }}
    <div>
      <label for="{{ form.friend_code.id_for_label }}" class="block font-medium">{{ form.friend_code.label }}</label>
      {{ form.friend_code }}
      {{ form.friend_code.errors }}
    </div>
    <div>
      <label for="{{ form.in_game_name.id_for_label }}" class="block font-medium">{{ form.in_game_name.label }}</label>
      {{ form.in_game_name }}
      {{ form.in_game_name.errors }}
    </div>
    <button type="submit" class="btn btn-primary w-full">{% trans "Add Friend Code" %}</button>
  </form>
  
  <div class="mt-4">
    <a href="{% url 'list_friend_codes' %}" class="btn btn-secondary">Back to Friend Codes</a>
  </div>
</div>

<!-- Include Cleave Zen from a CDN -->
<script src="https://unpkg.com/cleave-zen@0.0.17/dist/cleave-zen.umd.js"></script>
<script defer>
  document.addEventListener('DOMContentLoaded', function(){
    // Initialize Cleave Zen on the friend code input field.
    // Make sure that the input ID is correct (e.g., provided by Django's widget rendering).
    cleaveZen('#id_friend_code', {
      delimiters: ['-', '-', '-'], // Inserts dashes between the blocks.
      blocks: [4, 4, 4, 4],
      numericOnly: true
    });
  });
</script>
{% endblock %}