{% extends "idhub/base.html" %}
{% load i18n %}

{% block content %}
<h3>
  <i class="{{ icon }}"></i>
  {{ subtitle }}
</h3>
{% load django_bootstrap5 %}
<form role="form" method="post">
{% csrf_token %}
{% if form.errors %}
<div class="alert alert-danger alert-icon alert-icon-border alert-dismissible" role="alert">
  <div class="icon"><span class="mdi mdi-close-circle-o"></span></div>
  <div class="message">
    {% for field, error in form.errors.items %}
      {{ error }}<br />
    {% endfor %}
    <button class="btn-close" type="button" data-dismiss="alert" aria-label="Close"></button>
  </div>
</div>
{% endif %}
{% if form.credentials.all %}
{% for presentation in form.presentation_definition %}
<div class="row mt-5">
  <div class="col">
    <h3>{{ presentation|capfirst }}</3>
  </div>
</div>

<div class="row mt-2">
  <div class="col">
    <div class="table-responsive">
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th scope="col"></th>
            <th scope="col"><button type="button" class="btn btn-grey border border-dark">{% trans 'Type' %}</button></th>
            <th scope="col"><button type="button" class="btn btn-grey border border-dark">{% trans 'Details' %}</button></th>
            <th scope="col"><button type="button" class="btn btn-grey border border-dark">{% trans 'Issued' %}</button></th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          {% for f in form.credentials.all %}
          {% if f.type.lower == presentation.lower %}
          <tr style="font-size:15px;">
            <td><input class="form-check-input" type="radio" value="{{ f.id }}" name="{{ presentation.lower }}"></td>
            <td>{{ f.type }}</td>
            <td>{{ f.description }}</td>
            <td>{{ f.get_issued_on }}</td>
            <td><a href="{% url 'idhub:user_credential' f.id %}" class="text-primary" title="{% trans 'View' %}"><i class="bi bi-eye"></i></a></td>
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endfor %}

<div class="form-actions-no-box mt-3">
  <input class="form-check-input" type="checkbox" value="" name="consent" required="required" /> {% trans 'I read and understood the' %} 
  <a href="javascript:void()" data-bs-toggle="modal" data-bs-target="#legality-consent">{% trans 'data sharing notice' %}</a>
</div>
<div class="form-actions-no-box mt-5">
  <a class="btn btn-grey" href="{% url 'idhub:user_demand_authorization' %}">{% trans "Cancel" %}</a>
  <input class="btn btn-green-user" type="submit" name="submit" value="{% trans 'Present' %}" />
</div>

{% else %}
<div class="row mt-5">
  <div class="col">
    <h3>{% trans 'There are not credentials for present' %}</h3>
  </div>
</div>
{% endif %}
</form>

<!-- Modal -->
<div class="modal" id="legality-consent" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">{% trans 'Data sharing notice' %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% trans 'Are you sure that you want share the info of this credentials?' %}
      </div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>
{% endblock %}