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

{% block extra_head %}
<style>
/* Styl karty 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 z nagłówkiem i formularzem -->
      <div class="card border-0 shadow">
        <div class="card-header bg-light">
          <h4 class="mb-0">Dodaj nowe 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
                     placeholder="np. Mikrotik w biurze">
              <small class="text-muted">Wpisz przyjazną nazwę, np. „Mikrotik #1” lub „Router na u Kocura.</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 
                     placeholder="np. 192.168.88.1">
              <small class="text-muted">Adres IP lub domena urządzenia (np. mikrotik.moja-domena.pl).</small>
            </div>
            
            <!-- Port -->
            <div class="mb-3">
              <label for="port" class="form-label">Port</label>
              <input type="number" class="form-control" name="port" id="port" value="8728" required>
              <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
                     placeholder="np. admin">
            </div>
            
            <!-- Hasło -->
            <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>
            </div>
            
            <!-- Opcja SSL -->
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" name="use_ssl" id="use_ssl">
              <label class="form-check-label" for="use_ssl">Używaj SSL</label>
            </div>
            
            <!-- Opcja braku weryfikacji certyfikatu SSL -->
            <div class="mb-3 form-check">
              <input type="checkbox" class="form-check-input" name="ssl_insecure" id="ssl_insecure">
              <label class="form-check-label" for="ssl_insecure">
                Nie weryfikuj certyfikatu SSL
              </label>
            </div>
            
            <!-- Przycisk dodania urządzenia -->
            <button type="submit" class="btn btn-primary">Dodaj urządzenie</button>
          </form>
        </div>
      </div>
      
    </div>
  </div>
</div>
{% endblock %}