{% extends "base.html" %}
{% set active_page = "settings_importexport" %}
{% block page_title %}Im-/Export{% endblock %}
{% block page_sub %}<div class="topbar-sub">Umzug auf eine neue Umgebung</div>{% endblock %}

{% block content %}
<div class="settings-grid">

  <div class="card card-pad">
    <div class="section-head" style="margin-bottom:16px;">
      <div>
        <h2 style="font-size:16px;">Export</h2>
        <div class="hint">Geräte, Switche und Zugangsdaten als verschlüsseltes Bundle sichern — z.B. für einen Umzug auf eine neue Umgebung.</div>
      </div>
    </div>
    <form method="post" action="{{ url_for('export_data') }}">
      <div class="field">
        <label for="export_passphrase">Passphrase</label>
        <input type="password" name="export_passphrase" id="export_passphrase" required>
        <div class="field-hint">Wird zum Verschlüsseln der Export-Datei benötigt — für den späteren Import dieselbe Passphrase erneut eingeben.</div>
      </div>
      <button type="submit" class="btn btn-secondary btn-block">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></svg>
        Export herunterladen
      </button>
    </form>
  </div>

  <div class="card card-pad">
    <div class="section-head" style="margin-bottom:16px;">
      <div>
        <h2 style="font-size:16px;">Import</h2>
        <div class="hint">Ein zuvor exportiertes Bundle einlesen. Bestehende Einträge mit gleichem Namen/Hostname/MAC werden aktualisiert, neue werden angelegt.</div>
      </div>
    </div>
    <form method="post" action="{{ url_for('import_data') }}" enctype="multipart/form-data"
          data-confirm="Import wirklich starten? Bestehende Einträge mit gleichem Namen/Hostname/MAC werden überschrieben.">
      <div class="field">
        <label for="import_file">Export-Datei</label>
        <input type="file" name="import_file" id="import_file" accept=".json" required>
      </div>
      <div class="field">
        <label for="import_passphrase">Passphrase</label>
        <input type="password" name="import_passphrase" id="import_passphrase" required>
      </div>
      <button type="submit" class="btn btn-secondary btn-block">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 9V5a2 2 0 00-2-2H5a2 2 0 00-2 2v4"/><path d="M7 14l5-5 5 5"/><path d="M12 9v12"/></svg>
        Import starten
      </button>
    </form>
  </div>

</div>
{% endblock %}