{% 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 'State' %}</th>
              <th scope="col">{% trans 'User' %}</th>
              <th scope="col">{% trans 'Date' %}</th>
            </tr>
          </thead>
          <tbody>
            {% for state_change in device_states %}
            <tr {% if forloop.first %}class="table-success"{% endif %}>
              <td><strong>{{ state_change.state }}</strong></td>
              <td>{{ state_change.user.responsable_person|default:state_change.user.username }}</td>
              <td>{{ state_change.date|date:"M j, Y, H:i" }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="4" class="text-center">{% trans 'No state changes recorded.' %}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>