<style>
    .container-fluid {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .qr-code {
      max-width: 300px;
      display: block;
      margin: auto;
    }
    .copy-btn {
      margin-top: 1rem;
      display: inline-flex;
      align-items: center;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      cursor: pointer;
      border: 1px solid #007bff;
      background-color: #007bff;
      color: white;
      border-radius: 0.25rem;
    }
    .copy-btn:active {
      background-color: #0056b3;
      border-color: #0056b3;
    }
  </style>
  
  <div class="container-fluid">
      <div class="card h-100 shadow-sm">
        <img src="data:image/png;base64,{{ token_qr_code }}" class="card-img-top qr-code p-3" alt="QR Code for token">
        <div class="card-body">
          <div class="card-text mt-2">
              <h2 class="card-title">Token-Link:</h2>
              <a href="{{ token_url }}" class="copy-btn" style="text-decoration: none;" id="tokenLink">Link öffnen</a>
              <button class="copy-btn" onclick="toClipboard('{{ token_url }}')">Link kopieren</button>
          </div>
          <div class="card-text mt-2">
              <h2 class="mt-3">Gültig bis:</h2>
              {{ token_valid_to }}
          </div>
          <div class="card-text mt-2">
              <h2 class="mt-3">Ordner:</h2>
              {% for folder in token_folder %}
              {{ folder.foldername }}<br>
              {% endfor %}
          </div>
        </div>
      </div>
  </div>
  
  