{% extends "admin/layout.njk" %}
{% from "admin/macros.njk" import check, pair, machineRow, serviceGroupRow %}
{% set title = 'Homelab' %}

{% block content %}
<div class="heading">
  <h1>Homelab</h1>
  <a class="link" href="/de/homelab">Vorschau</a>
</div>

<form class="form" method="post" action="/admin/homelab">
  <input type="hidden" name="_csrf" value="{{ csrf }}">

  <section class="panel">
    <h2 class="panel__title">Seite</h2>
    <div class="checks">
      {{ check('Homelab-Seite öffentlich zeigen', 'visible', form.visible) }}
    </div>
    {{ pair('Einleitung', 'lead', form.lead, rows=2) }}
    {{ pair('Text unter Hardware und Diensten', 'body', form.body, rows=7, hint='Markdown geht, z. B. „## Was ich dabei gelernt habe“ als Überschrift.') }}
  </section>

  <section class="panel">
    <h2 class="panel__title">Hardware</h2>
    <div class="repeat" data-repeat>
      <div class="repeat__list" data-repeat-list>
        {% for machine in form.hardware %}{{ machineRow(machine) }}{% endfor %}
      </div>
      <template data-repeat-template>{{ machineRow({}) }}</template>
      <button type="button" class="button button--ghost" data-repeat-add>Gerät hinzufügen</button>
    </div>
  </section>

  <section class="panel">
    <h2 class="panel__title">Dienste</h2>
    <div class="repeat" data-repeat>
      <div class="repeat__list" data-repeat-list>
        {% for group in form.services %}{{ serviceGroupRow(group) }}{% endfor %}
      </div>
      <template data-repeat-template>{{ serviceGroupRow({}) }}</template>
      <button type="button" class="button button--ghost" data-repeat-add>Gruppe hinzufügen</button>
    </div>
  </section>

  <div class="actions">
    <button class="button" type="submit">Speichern</button>
  </div>
</form>
{% endblock %}