{% load i18n %}

<div class="tab-pane fade" id="user_properties">
      <div class="btn-group mt-1 mb-3">
        <a href="{% url 'device:add_user_property' object.pk %}" class="btn btn-primary">
            <i class="bi bi-plus">
            </i>
          {% trans 'New user property' %}
        </a>
      </div>

      <h5 class="card-title">{% trans 'User properties' %}
      </h5>
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">
              {% trans 'Key' %}
            </th>
            <th scope="col">
              {% trans 'Value' %}
            </th>
            <th scope="col" data-type="date" data-format="YYYY-MM-DD HH:mm">
              {% trans 'Created on' %}
            </th>
            <th>
            </th>
          </tr>
        </thead>
        <tbody>
          {% for a in object.get_user_properties %}
            <tr>
                <td>{{ a.key }}
                </td>
                <td>{{ a.value }}
                </td>
                <td>{{ a.created }}
                </td>
              <td>
                <div class="btn-group float-end">
                  <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#editModal{{ a.id }}">
                      <i class="bi bi-pencil">
                      </i> {% trans 'Edit' %}
                  </button>
                  <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ a.id }}">
                      <i class="bi bi-trash">
                      </i>
                  </button>
                </div>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

<!-- pop up modal for delete confirmation -->
{% for a in object.get_user_properties %}
<div class="modal fade" id="deleteModal{{ a.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ a.id }}" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
          <h5 class="modal-title" id="deleteModalLabel{{ a.id }}">{% trans "Confirm Deletion" %}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          </button>
      </div>
      <div class="modal-body">
          <p>
              <strong>{% trans "Key:" %}
              </strong> {{ a.key }}
          </p>
          <p>
              <strong>{% trans "Value:" %}
              </strong> {{ a.value }}
          </p>
          <p>
              <strong>{% trans "Created on:" %}
              </strong> {{ a.created }}
          </p>
      </div>
      <div class="modal-footer justify-content-center">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}
          </button>
        <form method="post" action="{% url 'device:delete_user_property' a.id %}">
          {% csrf_token %}
            <button type="submit" class="btn btn-danger">{% trans "Delete" %}
            </button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endfor %}

<!-- popup modals for edit button -->
{% for a in object.get_user_properties %}
<div class="modal fade" id="editModal{{ a.id }}" tabindex="-1" aria-labelledby="editModalLabel{{ a.id }}" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
          <h5 class="modal-title" id="editModalLabel{{ a.id }}">{% trans "Edit User Property" %}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          </button>
      </div>
      <div class="modal-body">
        <form id="editForm{{ a.id }}" method="post" action="{% url 'device:update_user_property' a.id %}">
          {% csrf_token %}
          <div class="mb-3">
              <label for="key" class="form-label">{% trans "Key" %}
              </label>
            <input type="text" class="form-control" id="key" name="key" value="{{ a.key }}">
          </div>
          <div class="mb-3">
              <label for="value" class="form-label">{% trans "Value" %}
              </label>
            <input type="text" class="form-control" id="value" name="value" value="{{ a.value }}">
          </div>
          <div class="modal-footer justify-content-center">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}
              </button>
              <button type="submit" class="btn btn-primary">{% trans "Save changes" %}
              </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endfor %}