{% 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 style="padding-top: 30px;">
<h3>Hola <span style="color: darkgreen;">{{current_user.username}}</span></h3>
<p>Aquí puedes ver los pines que has agregado y ver 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 id="qrgen" style="border-width:5px; border-color:#e6e6fa">
</div>
<script type="text/javascript">
  var qrcode = new QRCode(document.getElementById("qrgen"), {
    text: "https://baches.qro.mx/registrame/{{invite_code}}",
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#e6e6fa",
    correctLevel : QRCode.CorrectLevel.L
  });
  </script>
<h3>Tu link es:</h3>
<h2>https://baches.qro.mx/registrame/{{invite_code}}</h2>

{% if pins %}
    {% for pin in pins %}

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

        <tbody>

          <tr>
            <td>Agregado el</td>
            <td>{{ pin.time }}</td>
          </tr>
          <tr>
            <td>Photo</td>
            <td><img style="max-height: 66px;" src="{{ pin.photo }}"></td>
          </tr>
          <tr>
            <td>Latitude</td>
            <td>{{ pin.lat }}</td>
          </tr>
          <tr>
            <td>Longitude</td>
            <td>{{ pin.lng }}</td>
          </tr>
          <tr>
            <td>Tipo de mejora urbana</td>
            <td>{{ pin.typeofpin }}</td>
          </tr>
          <tr>
            <td>Eliminar pin</td>
            <td><a href="/remove_pin/{{pin._id}}"><button type="submit" formmethod="get">Eliminar</button></a></td>
          </tr>
        </tbody>
      </table>

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