{% extends "base.html" %} {% block title %}Import / Export Actions - Bolsa{%
endblock %} {% block header_title %}Gestion CSV{% endblock %} {% block content
%}
<div class="flex flex-col items-center justify-center py-6 relative">
  <!-- Système de Toasts (pour les messages flash de succès/erreur) -->
  <div
    id="toast-container"
    class="fixed top-6 left-1/2 transform -translate-x-1/2 z-50 space-y-3 w-full max-w-md px-4 pointer-events-none"
  >
    {% set messages = get_flashed_messages(with_categories=true) %} {% if
    messages %} {% for category, message in messages %}
    <div
      class="toast-message flex items-center px-4 py-3 rounded-xl shadow-2xl text-white text-sm font-medium transition-all duration-300 transform translate-y-0 opacity-100 {% if category == 'success' %} bg-emerald-600 border border-emerald-500 {% elif category == 'warning' %} bg-amber-600 border border-amber-500 {% else %} bg-rose-600 border border-rose-500 {% endif %}"
    >
      <span>{{ message }}</span>
    </div>
    {% endfor %} {% endif %}
  </div>

  <!-- Box centrée principale -->
  <div
    class="bg-gray-900 border border-gray-800 rounded-2xl shadow-2xl w-full max-w-3xl overflow-hidden"
  >
    <!-- 1. En-tête de la boîte (Titre) -->
    <div
      class="flex justify-between items-center px-8 py-6 border-b border-gray-800 bg-gray-950/50"
    >
      <div>
        <h2 class="text-xl font-extrabold text-white">
          Import & Export - Table Actions
        </h2>
        <p class="text-gray-400 text-sm mt-0.5">
          Gestion des transferts de données au format CSV.
        </p>
      </div>
      <a
        href="{{ url_for('main.menu') }}"
        class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-gray-200 text-sm font-medium rounded-lg transition duration-200"
      >
        Retour au menu
      </a>
    </div>

    <!-- 2. Corps de la boîte (Procédure et Boutons) -->
    <div class="p-8 space-y-6">
      <div class="bg-gray-950 border border-gray-800 rounded-xl p-6 space-y-4">
        <h3
          class="text-sm font-semibold text-gray-200 uppercase tracking-wider"
        >
          Procédure d'utilisation
        </h3>

        <div class="text-sm text-gray-300 space-y-3 leading-relaxed">
          <div>
            <strong class="text-white">1. Exportation des données :</strong>
            <p class="text-gray-400 mt-0.5">
              Cliquez sur le bouton <strong>Exporter en CSV</strong> pour
              télécharger une copie de sauvegarde de la table
              <code
                class="text-blue-400 bg-gray-900 px-1.5 py-0.5 rounded font-mono"
                >actions</code
              >
              sur votre poste. Le fichier contiendra l'ensemble des colonnes
              actuelles (<code class="text-gray-300 font-mono"
                >isin, ticker, company_name, exchange, pays, currency</code
              >).
            </p>
          </div>

          <div>
            <strong class="text-white">2. Importation des données :</strong>
            <p class="text-gray-400 mt-0.5">
              Préparez votre fichier au format CSV en respectant scrupuleusement
              l'ordre et le nom des en-têtes de colonnes (les champs
              <code
                class="text-blue-400 bg-gray-900 px-1.5 py-0.5 rounded font-mono"
                >id</code
              >
              et
              <code
                class="text-blue-400 bg-gray-900 px-1.5 py-0.5 rounded font-mono"
                >updated_at</code
              >
              sont facultatifs et gérés automatiquement) :
              <code
                class="text-blue-400 bg-gray-900 px-1.5 py-0.5 rounded font-mono"
                >isin;ticker;company_name;exchange;pays;currency</code
              >. Les données d'une même ligne doivent être séparées par un
              point-virgule (<strong>;</strong>) et chaque enregistrement doit
              simplement se trouver sur une nouvelle ligne. Cliquez sur
              <strong>Importer un CSV</strong> pour sélectionner et téléverser
              votre fichier vers la base de données.
            </p>
          </div>

          <div
            class="bg-amber-500/10 border border-amber-500/30 rounded-lg p-3 text-amber-300 text-xs flex items-start space-x-2"
          >
            <svg
              class="w-4 h-4 text-amber-400 shrink-0 mt-0.5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              ></path>
            </svg>
            <span
              ><strong>Attention :</strong> Assurez-vous de l'intégrité de vos
              données avant de procéder à un import massif pour éviter toute
              incohérence dans le référentiel boursier.</span
            >
          </div>
        </div>
      </div>

      <!-- Boutons d'action dans le corps -->
      <div
        class="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2"
      >
        <!-- Formulaire ou lien pour l'Export (réduit) -->
        <a
          href="{{ url_for('main.export_actions_csv') }}"
          class="w-full sm:w-1/4 flex items-center justify-center px-4 py-3 bg-blue-600 hover:bg-blue-500 text-white text-sm font-semibold rounded-xl shadow-lg transition duration-200"
        >
          <svg
            class="w-4 h-4 mr-2 shrink-0"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
            ></path>
          </svg>
          Exporter
        </a>

        <!-- Formulaire pour l'Import (prend toute la place restante) -->
        <form
          action="{{ url_for('main.import_actions_csv') }}"
          method="POST"
          enctype="multipart/form-data"
          class="w-full sm:w-3/4 flex items-center gap-2"
        >
          <input
            type="file"
            name="file"
            accept=".csv"
            required
            class="block w-full text-xs text-gray-400 file:mr-4 file:py-3 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-emerald-600 file:text-white hover:file:bg-emerald-500 file:cursor-pointer cursor-pointer bg-gray-950 border border-gray-800 rounded-xl"
          />
          <button
            type="submit"
            class="px-5 py-3 bg-emerald-600 hover:bg-emerald-500 text-white text-sm font-semibold rounded-xl shadow-lg transition duration-200 whitespace-nowrap"
          >
            Envoyer
          </button>
        </form>
      </div>
    </div>

    <!-- 3. Pied de boîte -->
    <div
      class="px-8 py-4 bg-gray-950 border-t border-gray-800 text-xs text-gray-400 italic text-center"
    >
      Module de maintenance sécurisé — Giraud Finance - 2026
    </div>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    // Gestion de la disparition automatique des messages flash (Toasts)
    const toasts = document.querySelectorAll(".toast-message");
    toasts.forEach((toast) => {
      setTimeout(() => {
        toast.style.opacity = "0";
        toast.style.transform = "translateY(10px)";
        setTimeout(() => toast.remove(), 300);
      }, 4000);
    });
  });
</script>
{% endblock %}