{% extends "base.html" %}

{% load static %}

{% load crispy_forms_tags %}

{% block content %}

<section class="vh-100" style="background-color: #eee;">
  <div class="container py-5 h-100">
    <div class="row d-flex justify-content-center align-items-center h-100">
      <div class="col-md-12 col-xl-8">

        <div class="card" style="border-radius: 15px;">
          <div class="card-body text-center">
            <div class="mt-3 mb-4">
              {% if form.foto.url is not None %}
                  <img src="{{ form.foto.url }}" class="rounded-circle img-fluid" style="width: 200px;" />
              {%  else %}
                <img src="/static/images/image026.png" class="rounded-circle img-fluid" style="width: 200px;" />
              {% endif %}
            </div>
            <h4 class="mb-2">{{ user.first_name }} {{ user.last_name }}</h4>
            <p class="text-muted mb-4">@{{ form.tipo }} <span class="mx-2">|</span> <a
                href="#!">{{ form.cuatrimestre }}@{{ datos.nombre }}</a></p>
            <div class="mb-4 pb-2">
              <button type="button" class="btn btn-outline-primary btn-floating">
                <i class="fab fa-facebook-f fa-lg"></i>
              </button>
              <button type="button" class="btn btn-outline-primary btn-floating">
                <i class="fab fa-twitter fa-lg"></i>
              </button>
              <button type="button" class="btn btn-outline-primary btn-floating">
                <i class="fab fa-skype fa-lg"></i>
              </button>
            </div>

            

            
            <div class="d-flex justify-content-between text-center mt-5 mb-2">
              <div>
                <p class="mb-2 h5">{{ count }}</p>
                <p class="text-muted mb-0">Accesos</p>
              </div>
              <div class="px-3">
                <p class="mb-2 h5">0000</p>
                <p class="text-muted mb-0">datos</p>
              </div>
              <div>
                <p class="mb-2 h5">0000</p>
                <p class="text-muted mb-0">datos</p>
              </div>
            </div>

            <div class="mt-3 mb-4">
              <img src="{{ form.qr.url }}"
                class="img-fluid" style="width: 300px;" />
            </div>
            <form method="POST" action="{% url 'mailqr' %}" class="mt-3" autocomplete="off" >
              {% csrf_token %}
              <input name="id" type="hidden" placeholder="{{ user.id }}" class="form-control" value="{{ user.id }}" readonly ><br>
              <button type="submit" class="btn btn-primary btn-rounded btn-lg">Enviar QR por Correo</button><br>
            </form><br>

            {% if user.is_authenticated %}
            <a href="{% url 'actualizaperfil' form.id %}" class="btn btn-primary btn-rounded btn-lg" >Actualizar Datos y codigo QR</a>
            {% endif %}
            <p>{{ form.key }}</p>

          </div>
        </div>

      </div>
    </div>
  </div>
</section>






        {% endblock content %}