{% load i18n %}
<!-- Log Tab TODO: currently only displays states, change when log table is implemented-->

    <div class="tab-pane fade" id="log">
      <h5 class="card-title mb-3">{% trans 'Log' %}</h5>
      <div class="table-responsive">
        <table class="table table-striped table-bordered">
          <thead class="table">
            <tr>
              <th scope="col">{% trans 'Date' %}</th>
              <th scope="col">{% trans 'User' %}</th>
              <th scope="col">{% trans 'State' %}</th>
              <th scope="col">{% trans 'Actions' %}</th>
            </tr>
          </thead>
          <tbody>
            {% for state_change in device_states %}
            <tr {% if forloop.first %}class="table-success"{% endif %}>
              <td>{{ state_change.date|date:"SHORT_DATETIME_FORMAT" }}</td>
              <td>{{ state_change.user.responsable_person|default:state_change.user.username }}</td>
              <td><strong>{{ state_change.state }}</strong></td>
              <td>
                {% if state_change.date|timesince < '1 hour' %}
                <a href="#" data-bs-toggle="modal" data-bs-target="#deleteStateModal{{ state_change.id }}" title="{% trans 'Delete State' %}">
                  <i class="bi bi-trash text-danger"></i>
                </a>

                <!-- Delete Confirmation Modal -->
                <div class="modal fade" id="deleteStateModal{{ state_change.id }}" tabindex="-1" aria-labelledby="deleteStateModalLabel{{ state_change.id }}" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="deleteStateModalLabel{{ state_change.id }}">{% trans 'Confirm Delete' %}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
                      </div>
                      <div class="modal-body">
                        <p>{% trans 'Are you sure you want to undo this state?' %}</p>
                        <p><strong>{{ state_change.state }}</strong> - {{ state_change.date|date:"SHORT_DATETIME_FORMAT" }}</p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans 'Cancel' %}</button>
                        <form method="post" action="{% url 'action:undo_action' state_change.id %}">
                          {% csrf_token %}
                          <button type="submit" class="btn btn-danger">{% trans 'Delete' %}</button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
                {% endif %}
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="4" class="text-center">{% trans 'No state changes recorded.' %}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>