{% extends "base.html" %}
{% block title %}Edytuj urządzenie - RouterOS Update{% endblock %}

{% block extra_head %}
<style>
/* Karta w trybie ciemnym */
body.dark-mode .card {
  background-color: #1e1e1e;
  color: #ccc;
  border-color: #444;
}
body.dark-mode .card .card-header.bg-light {
  background-color: #333 !important;
  border-bottom: 1px solid #444;
}
</style>
{% endblock %}

{% block content %}
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6">
      
      <!-- Karta: Edycja urządzenia -->
      <div class="card border-0 shadow">
        <div class="card-header bg-light">
          <h4 class="mb-0">Edytuj urządzenie</h4>
        </div>
        <div class="card-body">
          <form method="POST">
            <!-- Pole nazwy urządzenia -->
            <div class="mb-3">
              <label for="name" class="form-label">Nazwa urządzenia</label>
              <input type="text" class="form-control" name="name" id="name" required
                     value="{{ device.name }}"
                     placeholder="np. Mikrotik w biurze">
              <small class="text-muted">Przyjazna nazwa, np. „Router w piwnicy” lub „Mikrotik #2”.</small>
            </div>
            
            <!-- Adres IP -->
            <div class="mb-3">
              <label for="ip" class="form-label">Adres IP</label>
              <input type="text" class="form-control" name="ip" id="ip" required
                     value="{{ device.ip }}"
                     placeholder="np. 192.168.88.1">
            </div>
            
            <!-- Port -->
            <div class="mb-3">
              <label for="port" class="form-label">Port</label>
              <input type="number" class="form-control" name="port" id="port" required
                     value="{{ device.port }}">
              <small class="text-muted">Domyślnie 8728 (lub 8729 w przypadku SSL).</small>
            </div>
            
            <!-- Nazwa użytkownika -->
            <div class="mb-3">
              <label for="device_username" class="form-label">Nazwa użytkownika urządzenia</label>
              <input type="text" class="form-control" name="device_username" id="device_username" required
                     value="{{ device.device_username }}"
                     placeholder="np. admin">
            </div>
            
            <!-- Hasło urządzenia -->
            <div class="mb-3">
              <label for="device_password" class="form-label">Hasło urządzenia</label>
              <input type="password" class="form-control" name="device_password" id="device_password" required
                     value="{{ device.device_password }}">
            </div>
            
            <!-- SSL i weryfikacja certyfikatów -->
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl"
                     {% if device.use_ssl %}checked{% endif %}>
              <label class="form-check-label" for="use_ssl">Używaj SSL</label>
            </div>
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure"
                     {% if device.ssl_insecure %}checked{% endif %}>
              <label class="form-check-label" for="ssl_insecure">Nie weryfikuj certyfikatu SSL</label>
            </div>
            
            <!-- Branch aktualizacji (stable/dev/beta) -->
            <div class="mb-3">
              <label for="branch" class="form-label">Wybierz branch aktualizacji</label>
              <select class="form-select" name="branch" id="branch">
                <option value="stable" {% if device.branch == 'stable' %}selected{% endif %}>Stable</option>
                <option value="dev" {% if device.branch == 'dev' %}selected{% endif %}>Dev</option>
                <option value="beta" {% if device.branch == 'beta' %}selected{% endif %}>Beta</option>
              </select>
            </div>
            
            <!-- Przycisk zapisujący zmiany -->
            <button type="submit" class="btn btn-primary">Zapisz zmiany</button>
          </form>
        </div>
      </div>
      
    </div>
  </div>
</div>
{% endblock %}