{% extends 'base.html' %}
{% block title %}Vytvořit LXC{% endblock %}
{% block content %}
<div class="row g-4">
  <div class="col-lg-7">
    <div class="card shadow-sm border-0">
      <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-start mb-3">
          <div>
            <h1 class="h4 mb-1">Nový LXC kontejner</h1>
            <p class="text-secondary mb-0">Validace hostname, předvyplněný subnet, task progress a detail nového kontejneru.</p>
          </div>
          <span class="badge text-bg-dark">Subnet {{ default_subnet_prefix }}x</span>
        </div>

        <div id="globalAlert"></div>

        <form id="createForm" novalidate>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="node">Node</label>
              <select class="form-select" id="node" name="node" required></select>
              <div class="invalid-feedback" data-error-for="node"></div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="storage">Storage</label>
              <select class="form-select" id="storage" name="storage" required></select>
              <div class="invalid-feedback" data-error-for="storage"></div>
            </div>

            <div class="col-md-6">
              <label class="form-label" for="template">LXC template</label>
              <select class="form-select" id="template" name="template" required></select>
              <div class="invalid-feedback" data-error-for="template"></div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="vmid">VMID</label>
              <div class="input-group">
                <input class="form-control" type="number" id="vmid" name="vmid" min="100" required>
                <button class="btn btn-outline-secondary" type="button" id="refreshVmid">Načíst nextid</button>
              </div>
              <div class="invalid-feedback d-block" data-error-for="vmid"></div>
            </div>

            <div class="col-md-8">
              <label class="form-label" for="hostname">Hostname</label>
              <div class="input-group">
                <span class="input-group-text">{{ hostname_prefix }}</span>
                <input class="form-control" type="text" id="hostname" name="hostname" placeholder="ubuntu-app01" required>
              </div>
              <div class="form-text">Použijí se jen malá písmena, čísla a pomlčky.</div>
              <div class="invalid-feedback d-block" data-error-for="hostname"></div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="bridge">Bridge</label>
              <input class="form-control" type="text" id="bridge" name="bridge" value="{{ default_bridge }}">
              <div class="invalid-feedback d-block" data-error-for="bridge"></div>
            </div>

            <div class="col-md-4">
              <label class="form-label" for="cores">CPU</label>
              <input class="form-control" type="number" id="cores" name="cores" value="2" min="1" max="16" required>
              <div class="invalid-feedback d-block" data-error-for="cores"></div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="memory">RAM (MB)</label>
              <input class="form-control" type="number" id="memory" name="memory" value="2048" min="256" step="256" required>
              <div class="invalid-feedback d-block" data-error-for="memory"></div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="disk_gb">Disk (GB)</label>
              <input class="form-control" type="number" id="disk_gb" name="disk_gb" value="8" min="4" required>
              <div class="invalid-feedback d-block" data-error-for="disk_gb"></div>
            </div>

            <div class="col-md-4">
              <label class="form-label" for="ip_mode">IP režim</label>
              <select class="form-select" id="ip_mode" name="ip_mode">
                <option value="dhcp">DHCP</option>
                <option value="static">Static</option>
              </select>
              <div class="invalid-feedback d-block" data-error-for="ip_mode"></div>
            </div>
            <div class="col-md-4 static-ip-only d-none">
              <label class="form-label" for="ip_host">IP adresa</label>
              <div class="input-group">
                <span class="input-group-text">{{ default_subnet_prefix }}</span>
                <input class="form-control" type="number" id="ip_host" name="ip_host" min="2" max="254" placeholder="120">
              </div>
              <div class="invalid-feedback d-block" data-error-for="ip_host"></div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="vlan_tag">VLAN tag</label>
              <input class="form-control" type="number" id="vlan_tag" name="vlan_tag" placeholder="volitelné">
              <div class="invalid-feedback d-block" data-error-for="vlan_tag"></div>
            </div>

            <div class="col-md-6 static-ip-only d-none">
              <label class="form-label" for="gateway">Gateway</label>
              <input class="form-control" type="text" id="gateway" name="gateway" placeholder="192.168.50.1" value="{{ default_gateway }}">
              <div class="invalid-feedback d-block" data-error-for="gateway"></div>
            </div>
            <div class="col-md-6 static-ip-only d-none">
              <label class="form-label" for="dns">DNS</label>
              <input class="form-control" type="text" id="dns" name="dns" placeholder="192.168.50.1"  value="{{ default_dns }}">
              <div class="invalid-feedback d-block" data-error-for="dns"></div>
            </div>

            <div class="col-md-6">
              <label class="form-label" for="searchdomain">Search domain</label>
              <input class="form-control" type="text" id="searchdomain" name="searchdomain" value="{{ default_search_domain }}">
              <div class="invalid-feedback d-block" data-error-for="searchdomain"></div>
            </div>
            <div class="col-md-6">
              <label class="form-label" for="password">Heslo do kontejneru</label>
              <input class="form-control" type="password" id="password" name="password" placeholder="min. 8 znaků" required>
              <div class="invalid-feedback d-block" data-error-for="password"></div>
            </div>

            <div class="col-12">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="onboot" name="onboot" {% if default_onboot %}checked{% endif %}>
                <label class="form-check-label" for="onboot">Start při bootu node</label>
              </div>
	      <div class="form-check mt-2">
  		<input class="form-check-input" type="checkbox" id="start_now" name="start_now" checked>
		<label class="form-check-label" for="start_now">Spustit hned po vytvoření </label>
	     </div>	
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" id="unprivileged" name="unprivileged" {% if default_unprivileged %}checked{% endif %}>
                <label class="form-check-label" for="unprivileged">Unprivileged</label>
              </div>
	      <div class="form-check mt-2">
		  <input class="form-check-input" type="checkbox" id="enable_nesting" name="enable_nesting">
		  <label class="form-check-label" for="enable_nesting">
	    Povolit nesting
	  </label>
	</div>
<div class="form-text">
  Zapínej jen pokud to kontejner opravdu potřebuje.
</div>
            </div>
          </div>

          <div class="d-flex gap-2 mt-4">
            <button id="submitBtn" type="submit" class="btn btn-primary">Vytvořit kontejner</button>
            <button id="resetBtn" type="reset" class="btn btn-outline-secondary">Vyčistit</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-5">
    <div class="card shadow-sm border-0 mb-4">
      <div class="card-body p-4">
        <h2 class="h5 mb-3">Průběh tasku</h2>
        <div class="progress mb-2 progress-lg" role="progressbar" aria-label="Task progress">
          <div id="taskProgressBar" class="progress-bar progress-bar-striped" style="width: 0%">0%</div>
        </div>
        <div id="taskStage" class="small text-secondary mb-3">Ještě nebyla spuštěna žádná úloha.</div>
        <div class="small text-secondary mb-2">Poslední logy</div>
        <pre id="taskLogs" class="task-logs">-</pre>
      </div>
    </div>

    <div class="card shadow-sm border-0">
      <div class="card-body p-4">
        <h2 class="h5 mb-3">Detaily nového kontejneru</h2>
        <div id="containerDetails" class="text-secondary small">Po úspěšném vytvoření se tady zobrazí detaily.</div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
  window.APP_DEFAULTS = {
    defaultNode: {{ default_node|tojson }},
    subnetPrefix: {{ default_subnet_prefix|tojson }},
  };
</script>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
{% endblock %}