{% extends "pos/base.html" %}
{% block title %}Invoice Templates{% endblock %}

{% block content %}
<div class="container my-4">
  <h1>Invoice Templates</h1>
  <a href="{% url 'invoices:invoice_template_create' %}" class="btn btn-primary mb-3">Add New</a>

  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Default Status</th>
        <th>Actions</th>
        <th>Set as Default</th>
      </tr>
    </thead>
    <tbody>
      {% for tmpl in templates %}
      <tr>
        <td>{{ tmpl.name }}</td>
        <td>{% if tmpl.pk == default_pk %}Default{% endif %}</td>
        <td>
          <a href="{% url 'invoices:invoice_template_view' tmpl.pk 3 %}"
             target="_blank" class="btn btn-sm btn-info">View</a>
          <a href="{% url 'invoices:invoice_template_edit' tmpl.pk %}"
             class="btn btn-sm btn-warning">Edit</a>
          <button data-url="{% url 'invoices:invoice_template_delete' tmpl.pk %}"
                  class="btn btn-sm btn-danger delete-btn">Delete</button>
        </td>
        <td>
          {% if tmpl.pk != default_pk %}
            <a href="{% url 'invoices:invoice_template_set_default' tmpl.pk %}"
               class="btn btn-sm btn-success">Set as Default</a>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="4">No templates found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function(){
    document.querySelectorAll('.delete-btn').forEach(function(btn){
      btn.addEventListener('click', function(){
        if (confirm('Do you want to delete this template?')) {
          window.location.href = this.dataset.url;
        }
      });
    });
  });
</script>
{% endblock %}