{% extends 'secondbase.html' %}
{% block content %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>

<style>
  main {
    overflow-y: scroll;
  }
</style>
<div class="container-fluid" style="padding-top: 30px; max-width: 75vw; background-color: rgba(189, 216, 3, 0.9); padding: 3rem;">
<h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
<p>Aquí puedes ver los pines que has agregado y consultar tu enlace/QR de invitación. Cada vez que recargas esta página, tu enlace de invitacón cambia y el anterior se vuelve inválido.</p>
<div class="grid" style="padding-bottom: 2rem;">
  <div id="qrgen" style="padding-left: 5rem;">
  </div>
  <script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrgen"), {
      text: "https://baches.qro.mx/registrame/{{invite_code}}",
      width: 256,
      height: 256,
      colorDark : "#000000",
      colorLight : "#e6e6fa",
      correctLevel : QRCode.CorrectLevel.L
    });
    </script>
  <div>
    <h2>Tu link es:</h2>
    <p><a href="https://baches.qro.mx/registrame/{{invite_code}}">https://baches.qro.mx/registrame/{{invite_code}}</a></p>
  </div>
</div>
{% if pins %}
    {% for pin in pins %}

    <table border="1" cellpadding="5" cellspacing="0">

        <tbody>
          <tr>
            <td><b>Agregado el</b></td>
            <td>{{ pin.time }}</td>
          </tr>
          <tr>
            <td><b>Tipo de Mejora Urbana:</b></td>
            <td>{{ pin.typeofpin }}</td>
          </tr>
          <tr>
            <td><b>Descripción</b></td>
            <td>{{ pin.description }}</td>
          </tr>
          <tr>
            <td><b>Dirección</b></td>
            <td>{{ pin.address }}</td>
          </tr>
          <tr>
            <td><b>Foto</b></td>
            <td><img style="max-height: 66px;" src="{{ pin.photo }}"></td>
          </tr>
          <tr>
            <td><b>Latitud:</b></td>
            <td>{{ pin.lat }}</td>
          </tr>
          <tr>
            <td><b>Longitud:</b></td>
            <td>{{ pin.lng }}</td>
          </tr>
          <tr>
            <td><b>Eliminar este Pin:</b></td>
            <td><a href="/remove_pin/{{pin._id}}"><button type="submit" formmethod="get">Eliminar</button></a></td>
          </tr>
        </tbody>

    {% endfor %}
{% endif %}
</div>
{% endblock %}