{% extends "base.html" %}
{% block content %}
<div class="text-end mb-3">
  {% if current_view == 'v1' %}
    <a href="{{ url_for('router_details', router_id=router.id, view='v2') }}" class="btn btn-outline-secondary">Przełącz na widok v2</a>
  {% else %}
    <a href="{{ url_for('router_details', router_id=router.id, view='v1') }}" class="btn btn-outline-secondary">Przełącz na widok v1</a>
  {% endif %}
</div>
<div class="container my-4">
  <!-- Informacje o routerze -->
  <div class="card shadow-sm mb-4">
    <div class="card-header">
      <h2 class="mb-0">Router: {{ router.name }}</h2>
    </div>
    <div class="card-body">
      <p>
        <strong>Host:</strong> {{ router.host }} &nbsp;|&nbsp;
        <strong>Port:</strong> {{ router.port }} &nbsp;|&nbsp;
        <strong>SSH User:</strong> {{ router.ssh_user }}
      </p>
      <div class="d-flex flex-wrap gap-2">
        <!-- Mniejsze przyciski górne -->
        <form action="{{ url_for('router_export', router_id=router.id) }}" method="POST" class="d-inline">
          <button type="submit" class="btn btn-primary">Wykonaj /export</button>
        </form>
        <form action="{{ url_for('router_backup', router_id=router.id) }}" method="POST" class="d-inline">
          <button type="submit" class="btn btn-secondary">Wykonaj backup binarny</button>
        </form>
        <a href="{{ url_for('edit_router', router_id=router.id) }}" class="btn btn-warning">Edytuj ustawienia</a>
      </div>
    </div>
  </div>

  <!-- Zakładki z backupami -->
  <ul class="nav nav-tabs" id="routerTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="export-tab" data-bs-toggle="tab" data-bs-target="#export" type="button" role="tab" aria-controls="export" aria-selected="true">Pliki /export</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="binary-tab" data-bs-toggle="tab" data-bs-target="#binary" type="button" role="tab" aria-controls="binary" aria-selected="false">Pliki binarne</button>
    </li>
  </ul>
  <div class="tab-content" id="routerTabContent">
    <!-- Zakładka /export -->
    <div class="tab-pane fade show active" id="export" role="tabpanel" aria-labelledby="export-tab">
      <div class="card mt-3 shadow-sm">
        <div class="card-body">
          {% if export_backups %}
          <!-- Formularz masowych akcji dla eksportów -->
          <form id="export_mass_actions_form" action="{{ url_for('download_zip') }}" method="POST" class="mb-3">
            <div class="d-flex justify-content-end">
              <button type="submit" name="action" value="download" class="btn btn-lg btn-success">
                <i class="bi bi-file-earmark-zip"></i> Pobierz zaznaczone (.zip)
              </button>
            </div>
          </form>
          <!-- Tabela z eksportami z podzielonymi kolumnami akcji -->
          <table class="table table-bordered table-striped">
            <thead class="table-dark">
              <tr>
                <th style="width: 3%;"><input type="checkbox" id="select_all_export"></th>
                <th>Nazwa pliku</th>
                <th>Rozmiar</th>
                <th>Data</th>
                <th>Diff</th>
                <th>Pobierz</th>
                <th>Podgląd</th>
                <th>Wyślij mailem</th>
                <th>Usuń</th>
              </tr>
            </thead>
            <tbody>
              {% for b in export_backups %}
              <tr>
                <td>
                  <input type="checkbox" name="backup_id" value="{{ b.id }}" form="export_mass_actions_form">
                </td>
                <td>{{ b.file_path|basename }}</td>
                <td>{{ b.file_path|filesize }}</td>
                <td>{{ b.created_at.strftime("%Y-%m-%d %H:%M:%S") }}</td>
                <td>
                  {% if loop.index0 > 0 %}
                    <a href="{{ url_for('diff_view', backup_id1=b.id, backup_id2=export_backups[0].id) }}" class="btn btn-sm btn-info">Diff</a>
                  {% else %}
                    <small>Brak nowszego</small>
                  {% endif %}
                </td>
                <td>
                  <a href="{{ url_for('download_file', filename=b.file_path|basename) }}" class="btn btn-lg btn-info" title="Pobierz">
                    <i class="bi bi-download"></i>
                  </a>
                </td>
                <td>
                  <a href="{{ url_for('view_export', backup_id=b.id) }}" class="btn btn-lg btn-outline-primary" title="Podgląd">
                    <i class="bi bi-eye"></i>
                  </a>
                </td>
                <td>
                  <form action="{{ url_for('send_by_email', backup_id=b.id) }}" method="POST" class="d-inline">
                    <input type="hidden" name="next" value="{{ url_for('router_details', router_id=router.id) }}">
                    <button type="submit" class="btn btn-lg btn-primary" title="Wyślij mailem">
                      <i class="bi bi-envelope"></i>
                    </button>
                  </form>
                </td>
                <td>
                  <form action="{{ url_for('delete_backup', backup_id=b.id) }}" method="POST" class="d-inline" onsubmit="return confirm('Na pewno usunąć backup?');">
                    <input type="hidden" name="next" value="{{ url_for('router_details', router_id=router.id) }}">
                    <button type="submit" class="btn btn-lg btn-danger" title="Usuń">
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p class="text-muted">Brak plików /export.</p>
          {% endif %}
        </div>
      </div>
    </div>
    <!-- Zakładka backupów binarnych -->
    <div class="tab-pane fade" id="binary" role="tabpanel" aria-labelledby="binary-tab">
      <div class="card mt-3 shadow-sm">
        <div class="card-body">
          {% if binary_backups %}
          <!-- Formularz masowych akcji dla backupów binarnych -->
          <form id="binary_mass_actions_form" action="{{ url_for('download_zip') }}" method="POST" class="mb-3">
            <div class="d-flex justify-content-end">
              <button type="submit" name="action" value="download" class="btn btn-lg btn-success">
                <i class="bi bi-file-earmark-zip"></i> Pobierz zaznaczone (.zip)
              </button>
            </div>
          </form>
          <!-- Tabela z backupami binarnymi z podzielonymi kolumnami akcji -->
          <table class="table table-bordered table-striped">
            <thead class="table-dark">
              <tr>
                <th style="width: 3%;"><input type="checkbox" id="select_all_binary"></th>
                <th>Nazwa pliku</th>
                <th>Rozmiar</th>
                <th>Data</th>
                <th>Pobierz</th>
                <th>Wgraj do routera</th>
                <th>Wyślij mailem</th>
                <th>Usuń</th>
              </tr>
            </thead>
            <tbody>
              {% for b in binary_backups %}
              <tr>
                <td>
                  <input type="checkbox" name="backup_id" value="{{ b.id }}" form="binary_mass_actions_form">
                </td>
                <td>{{ b.file_path|basename }}</td>
                <td>{{ b.file_path|filesize }}</td>
                <td>{{ b.created_at.strftime("%Y-%m-%d %H:%M:%S") }}</td>
                <td>
                  <a href="{{ url_for('download_file', filename=b.file_path|basename) }}" class="btn btn-lg btn-info" title="Pobierz">
                    <i class="bi bi-download"></i>
                  </a>
                </td>
                <td>
                  <form action="{{ url_for('upload_backup', router_id=router.id, backup_id=b.id) }}" method="POST" class="d-inline">
                    <button type="submit" class="btn btn-lg btn-secondary" title="Wgraj do routera">
                      <i class="bi bi-upload"></i>
                    </button>
                  </form>
                </td>
                <td>
                  <form action="{{ url_for('send_by_email', backup_id=b.id) }}" method="POST" class="d-inline">
                    <button type="submit" class="btn btn-lg btn-primary" title="Wyślij mailem">
                      <i class="bi bi-envelope"></i>
                    </button>
                  </form>
                </td>
                <td>
                  <form action="{{ url_for('delete_backup', backup_id=b.id) }}" method="POST" class="d-inline" onsubmit="return confirm('Na pewno usunąć backup?');">
                    <input type="hidden" name="next" value="{{ url_for('router_details', router_id=router.id) }}">
                    <button type="submit" class="btn btn-lg btn-danger" title="Usuń">
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          {% else %}
          <p class="text-muted">Brak plików binarnych.</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Skrypty do obsługi zaznaczania checkboxów w każdej zakładce -->
<script>
document.getElementById('select_all_export').addEventListener('change', function(e) {
  var checkboxes = document.querySelectorAll('input[name="backup_id"][form="export_mass_actions_form"]');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = e.target.checked;
  }
});
document.getElementById('select_all_binary').addEventListener('change', function(e) {
  var checkboxes = document.querySelectorAll('input[name="backup_id"][form="binary_mass_actions_form"]');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = e.target.checked;
  }
});

// Inicjalizacja zakładek Bootstrap (jeśli nie są już inicjowane globalnie)
var triggerTabList = [].slice.call(document.querySelectorAll('#routerTab button'));
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl);
  triggerEl.addEventListener('click', function (event) {
    event.preventDefault();
    tabTrigger.show();
  });
});
</script>
{% endblock %}