{% extends 'base.html' %}

      {% block content %}
      <script>
        document.getElementById("params").classList.add("is-active")
      </script>

      <!-- En-tête -->
      <section class="section is-title-bar" style="background: #ffffff; padding: 2rem 1.5rem; margin-bottom: 1.5rem; border-radius: 12px; border: 1px solid #f0f0f0;">
        <div class="level" style="margin-bottom: 0;">
          <div class="level-left">
            <div class="level-item">
              <div>
                <h1 class="title mb-5" style="color: #6B1414; margin-bottom: 0.25rem; font-size: 1.75rem; font-weight: 600;">
                   
                  Paramètres
                </h1>
                <p class="subtitle is-6" style="color: #9ca3af; margin-bottom: 0;">Configurez votre compte et intégration API</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Navigation par onglets -->
      <div class="tabs is-boxed" style="margin-bottom: 1.5rem;">
        <ul style="border-bottom: 2px solid #f0f0f0;">
          <li class="is-active" id="tab-cors">
            <a style="border-radius: 8px 8px 0 0; padding: 0.75rem 1.5rem; color: #6B1414; border-bottom: 3px solid #6B1414;" onclick="switchTab('cors')">
              <span class="icon"><i class="mdi mdi-web"></i></span>
              <span>Cross Origin</span>
            </a>
          </li>
          <li id="tab-api">
            <a style="border-radius: 8px 8px 0 0; padding: 0.75rem 1.5rem; color: #9ca3af;" onclick="switchTab('api')">
              <span class="icon"><i class="mdi mdi-key-variant"></i></span>
              <span>Intégration API</span>
            </a>
          </li>
        </ul>
      </div>
      
      <section>
        <!-- Section Cross Origin -->
        <div id="section-cors" class="settings-section">
          <div class="card" style="border-radius: 12px; border: 1px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
            <header class="card-header" style="background: #fdfcfc; border-bottom: 1px solid #f0f0f0; border-radius: 12px 12px 0 0;">
              <p class="card-header-title" style="color: #1f2937; font-weight: 600;">
                <span class="icon" style="color: #6B1414;"><i class="mdi mdi-web"></i></span>
                <span>Gestion Cross Origin Access</span>
              </p>
            </header>
            <div class="card-content" style="padding: 2rem;">
              
              <!-- Information -->
              <div style="background: #dbeafe; border-left: 4px solid #3b82f6; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
                <p style="color: #1e40af; line-height: 1.6;">
                  <span class="icon"><i class="mdi mdi-information"></i></span>
                  Le Cross-Origin Resource Sharing (CORS) permet de gérer les domaines autorisés à accéder à votre API. Ajoutez <code style="background: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-weight: 600;">127.0.0.1</code> pour les tests en local.
                </p>
              </div>

              <!-- Formulaire d'ajout -->
              <form action="/update/cors?type=add" style="margin-bottom: 2rem;">
                <div class="field">
                  <label class="label" style="font-size: 0.875rem; font-weight: 600; color: #4b5563; margin-bottom: 0.75rem;">
                    Ajouter un nouveau domaine
                  </label>
                  <div class="field has-addons">
                    <div class="control is-expanded">
                      <input type="text" minlength="8" autocomplete="off" name="url" value="" placeholder="exemple.com ou 127.0.0.1" class="input" style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.75rem 1rem;" required>
                      <input type="hidden" name="type" value="add">
                    </div>
                    <div class="control">
                      <button type="submit" class="button" style="background: #6B1414; color: white; border: none; border-radius: 8px; padding: 0.75rem 1.5rem; margin-left: 0.5rem; font-weight: 500; transition: all 0.3s;">
                        <span class="icon"><i class="mdi mdi-plus"></i></span>
                        <span>Ajouter</span>
                      </button>
                    </div>
                  </div>
                </div>
              </form>

              <!-- Liste des domaines -->
              <div style="background: #fafafa; border-radius: 8px; padding: 1.5rem;">
                <p style="font-weight: 600; color: #1f2937; margin-bottom: 1rem;">
                  <span class="icon"><i class="mdi mdi-format-list-bulleted"></i></span>
                  Domaines autorisés
                </p>
                
                {% if cu.cors %}
                <div class="domain-list">
                  {% for c in cu.cors %}
                  <div class="domain-item" style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 1rem 1.5rem; margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
                    <div style="display: flex; align-items: center;">
                      <span class="icon" style="color: #059669; margin-right: 0.75rem;"><i class="mdi mdi-check-circle"></i></span>
                      <span style="color: #1f2937; font-weight: 500; font-family: 'Courier New', monospace;">{{c}}</span>
                    </div>
                    <a href="/update/cors?url={{c}}&type=del" class="button is-small" style="background: #fee2e2; color: #991b1b; border: none; border-radius: 6px; padding: 0.5rem 1rem; font-weight: 500;">
                      <span class="icon is-small"><i class="mdi mdi-delete"></i></span>
                      <span>Supprimer</span>
                    </a>
                  </div>
                  {% endfor %}
                </div>
                {% else %}
                <div style="text-align: center; padding: 2rem; color: #9ca3af;">
                  <span class="icon is-large" style="font-size: 3rem;">
                    <i class="mdi mdi-web-off mdi-48px"></i>
                  </span>
                  <p style="margin-top: 1rem;">Aucun domaine configuré</p>
                </div>
                {% endif %}
              </div>

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

        <!-- Section Intégration API -->
        <div id="section-api" class="settings-section" style="display: none;">
          <div class="card" style="border-radius: 12px; border: 1px solid #f0f0f0; box-shadow: 0 2px 8px rgba(0,0,0,0.04);">
            <header class="card-header" style="background: #fdfcfc; border-bottom: 1px solid #f0f0f0; border-radius: 12px 12px 0 0;">
              <p class="card-header-title" style="color: #1f2937; font-weight: 600;">
                <span class="icon" style="color: #D84315;"><i class="mdi mdi-key-variant"></i></span>
                <span>Clés d'intégration API</span>
              </p>
            </header>
            <div class="card-content" style="padding: 2rem;">
              
              <!-- Information -->
              <div style="background: #fef3c7; border-left: 4px solid #f59e0b; padding: 1.5rem; border-radius: 8px; margin-bottom: 2rem;">
                <p style="color: #92400e; line-height: 1.6; font-weight: 500;">
                  <span class="icon"><i class="mdi mdi-shield-alert"></i></span>
                  <strong>Important :</strong> Ne partagez jamais vos clés API. Conservez-les en sécurité et ne les exposez pas dans votre code côté client.
                </p>
              </div>

              <form>
                <!-- CLE ID -->
                <div class="field" style="margin-bottom: 2rem;">
                  <label class="label" style="font-size: 0.875rem; font-weight: 600; color: #4b5563; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">
                    <span class="icon is-small"><i class="mdi mdi-identifier"></i></span>
                    Clé ID
                  </label>
                  <div class="field has-addons">
                    <div class="control is-expanded">
                      <input type="password" id="cardid" minlength="8" autocomplete="off" name="id" value="{{cu.card_id}}" disabled class="input" style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.75rem 1rem; background: #f9fafb; font-family: 'Courier New', monospace;" required>
                    </div>
                    <div class="control">
                      <button type="button" class="button" onclick="toggleVisibility('cardid')" style="background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 8px; margin-left: 0.5rem; padding: 0.75rem;">
                        <span class="icon"><i class="mdi mdi-eye"></i></span>
                      </button>
                      <button type="button" class="button" onclick="copyKey(event,'cardid')" style="background: #6B1414; color: white; border: none; border-radius: 8px; margin-left: 0.5rem; padding: 0.75rem 1.25rem;">
                        <span class="icon"><i class="mdi mdi-content-copy"></i></span>
                        <span>Copier</span>
                      </button>
                    </div>
                  </div>
                </div>

                <!-- CLE SECRET -->
                <!-- CLE SECRET -->
                <div class="field" style="margin-bottom: 2rem;">
                  <label class="label" style="font-size: 0.875rem; font-weight: 600; color: #4b5563; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">
                    <span class="icon is-small"><i class="mdi mdi-shield-lock"></i></span>
                    Clé Secrète
                  </label>
                  <div class="field has-addons">
                    <div class="control is-expanded">
                      <input type="password" minlength="8" id="secret" autocomplete="off" name="secret" value="{{cu.secret_id}}" disabled class="input" style="border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.75rem 1rem; background: #f9fafb; font-family: 'Courier New', monospace;" required>
                    </div>
                    <div class="control">
                      <button type="button" class="button" onclick="toggleVisibility('secret')" style="background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; border-radius: 8px; margin-left: 0.5rem; padding: 0.75rem;">
                        <span class="icon"><i class="mdi mdi-eye"></i></span>
                      </button>
                      <button type="button" class="button" onclick="copyKey(event,'secret')" style="background: #6B1414; color: white; border: none; border-radius: 8px; margin-left: 0.5rem; padding: 0.75rem 1.25rem;">
                        <span class="icon"><i class="mdi mdi-content-copy"></i></span>
                        <span>Copier</span>
                      </button>
                    </div>
                  </div>
                </div>

                <!-- Exemple d'utilisation -->
                <div style="background: #f0fdf4; border-left: 4px solid #059669; padding: 1.5rem; border-radius: 8px;">
                  <p style="color: #065f46; font-weight: 600; margin-bottom: 0.75rem;">
                    <span class="icon"><i class="mdi mdi-code-tags"></i></span>
                    Exemple d'utilisation
                  </p>
                  <pre style="background: #064e3b; color: #d1fae5; padding: 1rem; border-radius: 6px; font-size: 0.875rem; overflow-x: auto;"><code>{
  "k_id": "votre_id_ici",
  "k_secret": "votre_secret_ici",
  ...
}</code></pre>
                </div>

              </form>

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

      </section>
      <br><br><br>
      <!-- Styles -->
      <style>
        .tabs li a {
          transition: all 0.3s;
        }

        .tabs li:not(.is-active) a:hover {
          background: #fafafa;
          color: #6B1414 !important;
          border-bottom-color: #F5E6D3;
        }

        .domain-item {
          transition: all 0.2s;
        }

        .domain-item:hover {
          transform: translateX(4px);
          box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        @keyframes slideIn {
          from {
            transform: translateX(100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }

        @media only screen and (max-width: 768px) {
          .field.has-addons .control:not(:last-child) {
            margin-bottom: 0.5rem;
          }
          
          .field.has-addons {
            flex-direction: column;
          }
          
          .field.has-addons .control {
            width: 100%;
          }

          .field.has-addons .control .button {
            margin-left: 0 !important;
            width: 100%;
          }
        }
      </style>

      <!-- JavaScript -->
      <script>
        // Changer d'onglet
        function switchTab(tab) {
          // Masquer toutes les sections
          document.querySelectorAll('.settings-section').forEach(section => {
            section.style.display = 'none';
          });

          // Retirer la classe active de tous les onglets
          document.querySelectorAll('.tabs li').forEach(li => {
            li.classList.remove('is-active');
            const link = li.querySelector('a');
            link.style.color = '#9ca3af';
            link.style.borderBottom = 'none';
          });

          // Afficher la section sélectionnée
          document.getElementById(`section-${tab}`).style.display = 'block';

          // Activer l'onglet sélectionné
          const activeTab = document.getElementById(`tab-${tab}`);
          activeTab.classList.add('is-active');
          const activeLink = activeTab.querySelector('a');
          activeLink.style.color = '#6B1414';
          activeLink.style.borderBottom = '3px solid #6B1414';
        }

        // Basculer la visibilité du mot de passe
        function toggleVisibility(id) {
          const input = document.getElementById(id);
          const icon = event.target.closest('button').querySelector('i');
          
          if (input.type === 'password') {
            input.type = 'text';
            icon.classList.remove('mdi-eye');
            icon.classList.add('mdi-eye-off');
          } else {
            input.type = 'password';
            icon.classList.remove('mdi-eye-off');
            icon.classList.add('mdi-eye');
          }
        }

        // Copier la clé
        function copyKey(evt, id) {
          const text = document.getElementById(id).value;
          const button = evt.target.closest('button');
          const originalContent = button.innerHTML;
          
          navigator.clipboard.writeText(text)
            .then(() => {
              button.innerHTML = '<span class="icon"><i class="mdi mdi-check"></i></span><span>Copié!</span>';
              button.style.background = '#059669';
              
              showNotification('Clé copiée dans le presse-papiers!', 'success');
              
              setTimeout(() => {
                button.innerHTML = originalContent;
                button.style.background = '#6B1414';
              }, 2000);
            })
            .catch(err => {
              showNotification('Erreur lors de la copie', 'danger');
              console.log('Something went wrong', err);
            });
        }

        // Notification
        function showNotification(message, type = 'info') {
          const notification = document.createElement('div');
          notification.className = `notification is-${type}`;
          notification.style.cssText = `
            position: fixed; top: 20px; right: 20px; z-index: 9999;
            min-width: 300px; border-radius: 8px; animation: slideIn 0.3s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
          `;
          notification.innerHTML = `<button class="delete"></button>${message}`;
          document.body.appendChild(notification);
          
          notification.querySelector('.delete').addEventListener('click', () => {
            notification.remove();
          });
          
          setTimeout(() => notification.remove(), 3000);
        }

        // Compatibilité avec l'ancienne fonction copyMe
        function copyMe(evt, id) {
          copyKey(evt, id);
        }
      </script>
    
      {% endblock content %}