progress on conversion to tailwind

theme/templates/friend_codes/add_friend_code.html

@@ -0,0 +1,33 @@
+{% extends 'base.html' %}
+{% load crispy_forms_tags %}
+
+{% 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|crispy }}
+    <button type="submit" class="btn btn-primary w-full">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>
+  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).
+    new CleaveZen('#id_friend_code', {
+      delimiters: ['-', '-', '-'], // Inserts dashes between the blocks.
+      blocks: [4, 4, 4, 4],
+      numericOnly: true
+    });
+  });
+</script>
+{% endblock %} 

theme/templates/friend_codes/confirm_delete_friend_code.html

@@ -0,0 +1,33 @@
+{% extends 'base.html' %}
+{% load crispy_forms_tags %}
+
+{% block title %}Delete Friend Code{% endblock %}
+
+{% block content %}
+<div class="container mx-auto max-w-md mt-6">
+  <h1 class="text-3xl font-bold mb-4">Delete Friend Code</h1>
+  <p class="mb-4">
+    Are you sure you want to delete friend code:
+    <span class="font-mono">{{ friend_code.friend_code }}</span>?
+  </p>
+  
+  {% if error_message %}
+    <div class="alert alert-warning mb-4">
+      {{ error_message }}
+    </div>
+  {% endif %}
+  
+  <form method="post" class="flex space-x-4">
+    {% csrf_token %}
+    <button type="submit" class="btn btn-error"
+      {% if disable_delete %} disabled {% endif %}>
+      {% if disable_delete %}
+        Delete Not Allowed
+      {% else %}
+        Confirm Delete
+      {% endif %}
+    </button>
+    <a href="{% url 'list_friend_codes' %}" class="btn btn-secondary">Cancel</a>
+  </form>
+</div>
+{% endblock %} 

theme/templates/friend_codes/list_friend_codes.html

@@ -0,0 +1,50 @@
+{% 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">{{ 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 %}