<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Meine Links</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      /* Use full width */
      .container-fluid {
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      .qr-code {
        max-width: 300px;
        display: block;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <h1 class="mb-4">Übersicht deiner gültigen Links</h1>
      <div class="mb-3">
        <a href="{{ url_for('index') }}" class="btn btn-primary mt-1">App</a>
        <a href="{{ url_for('mylinks') }}" class="btn btn-primary mt-1">Meine Links</a>
        <a href="{{ url_for('connections') }}" class="btn btn-primary mt-1">Verbindungen</a>
        <a href="{{ url_for('dashboard') }}" class="btn btn-primary mt-1">Auswertung</a>
      </div>
      {% if allowed_secrets %}
        <div class="row">
          {% for secret in allowed_secrets %}
            <div class="col-md-4 mb-4">
              <div class="card h-100 shadow-sm">
                <img src="data:image/png;base64,{{ secret_qr_codes[secret] }}" class="card-img-top qr-code p-3" alt="QR Code for secret">
                <div class="card-body">
                  <h5 class="card-title">Geheimnis: {{ secret }}</h5>
                  <p class="card-text">
                    <a href="https://{{ request.host }}?secret={{ secret }}" class="text-decoration-none">
                      https://{{ request.host }}?secret={{ secret }}
                    </a>
                  </p>
                  <p class="card-text">
                    <small class="text-muted">Gültig bis: {{ secret_valid_to[secret] }}</small>
                  </p>
                  <form method="post" action="{{ url_for('remove_secret') }}" class="mt-3">
                    <input type="hidden" name="secret" value="{{ secret }}">
                    <button type="submit" class="btn btn-danger btn-sm">Link entfernen</button>
                  </form>
                  {% if secret_folders[secret] %}
                    <h6 class="mt-3">Ordner</h6>
                    <ul class="list-group list-group-flush">
                      {% for folder in secret_folders[secret] %}
                        <li class="list-group-item">
                          <strong>{{ folder.foldername }}</strong>
                        </li>
                      {% endfor %}
                    </ul>
                  {% else %}
                    <p class="text-muted">Keine Ordner für dieses Gemeimnis hinterlegt.</p>
                  {% endif %}
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="alert alert-warning" role="alert">
          Du hast aktuell keine gültigen Links.
        </div>
      {% endif %}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
