{% extends 'base.html' %}
{% block title %}{{ job.name if job else jt.label }}{% endblock %}
{% block content %}
<div class="head">
  <div><a class="label" href="{{ url_for('routines') }}">← Routines</a><h1>{{ job.name if job else 'Nieuwe routine' }}</h1><div class="muted">{{ jt.label }}</div></div>
  {% if job %}<div class="actions"><form method="post" action="{{ url_for('routine_run', jid=job.id) }}" class="inline"><button class="btn btn-outline-primary">Nu uitvoeren</button></form></div>{% endif %}
</div>
<div class="row g-4">
  <div class="col-lg-7">
    <form method="post" class="card"><div class="card-body">
      {% if jt.description %}<p class="hint" style="margin:0 0 1rem">{{ jt.description }}</p>{% endif %}
      <div class="row g-3">
        <div class="col-12"><label class="form-label" for="name">Naam</label><input class="form-control" id="name" name="name" value="{{ job.name if job else jt.label }}"></div>
        <div class="col-6 col-md-4"><label class="form-label" for="every">Elke</label><input class="form-control" id="every" type="number" min="1" name="every" value="{{ every }}" required></div>
        <div class="col-6 col-md-4"><label class="form-label" for="unit">Eenheid</label>
          <select class="form-select" id="unit" name="unit">{% for size, l in UNITS %}<option value="{{ size }}" {{ 'selected' if unit == size }}>{{ l }}</option>{% endfor %}</select></div>
        {% for f in jt.fields %}
          {% if f.kind == 'bool' %}
          <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="f-{{ f.key }}" name="{{ f.key }}" value="1" {{ 'checked' if config[f.key] }}><label class="form-check-label" for="f-{{ f.key }}">{{ f.label }}</label></div>{% if f.hint %}<p class="hint">{{ f.hint }}</p>{% endif %}</div>
          {% elif f.kind == 'mailboxes' %}
          <div class="col-12"><span class="form-label d-block">{{ f.label }}</span>
            <div class="d-flex flex-wrap gap-3">{% for m in mailboxes %}<div class="form-check"><input class="form-check-input" type="checkbox" id="f-{{ f.key }}-{{ m.id }}" name="{{ f.key }}" value="{{ m.id }}" {{ 'checked' if m.id in config[f.key] }}><label class="form-check-label" for="f-{{ f.key }}-{{ m.id }}">{{ m.name }}</label></div>{% else %}<span class="muted">Nog geen mailboxen.</span>{% endfor %}</div>
            {% if f.hint %}<p class="hint">{{ f.hint }}</p>{% endif %}</div>
          {% else %}
          <div class="col-md-8"><label class="form-label" for="f-{{ f.key }}">{{ f.label }}</label><input class="form-control" id="f-{{ f.key }}" type="{{ 'number' if f.kind == 'number' else f.kind }}" name="{{ f.key }}" value="{{ config[f.key] }}">{% if f.hint %}<p class="hint">{{ f.hint }}</p>{% endif %}</div>
          {% endif %}
        {% endfor %}
        <div class="col-12"><div class="form-check"><input class="form-check-input" type="checkbox" id="active" name="active" value="1" {{ 'checked' if not job or job.active }}><label class="form-check-label" for="active">Actief</label></div></div>
      </div>
      <div class="actions">
        <button class="btn btn-primary">Opslaan</button>
        <a class="btn btn-outline-secondary" href="{{ url_for('routines') }}">Annuleren</a>
      </div>
    </div></form>
    {% if job %}
    <form method="post" action="{{ url_for('routine_delete', jid=job.id) }}" onsubmit="return confirm('Routine verwijderen?')">
      <button class="btn btn-outline-secondary btn-sm">Routine verwijderen</button>
    </form>
    {% endif %}
  </div>
  {% if job %}
  <div class="col-lg-5">
    <div class="card"><div class="card-body">
      <h2>Logboek</h2>
      <p class="hint">Volgende keer: {{ (job.next_run|dt if job.next_run else 'zo snel mogelijk') if job.active else 'staat uit' }}</p>
      {% if runs %}
      <ul class="timeline">
        {% for r in runs %}<li><b>{{ r.started_at|dt }}</b> {% if r.status == 'fout' %}<span class="chip nieuw">Fout</span>{% endif %}{% if r.manual %} <span class="muted">(handmatig)</span>{% endif %}<br><span class="muted">{{ r.message }}</span></li>{% endfor %}
      </ul>
      {% else %}<p class="empty">Nog niet uitgevoerd.</p>{% endif %}
    </div></div>
  </div>
  {% endif %}
</div>
{% endblock %}