{% extends "base.html" %}
{% block content %}
<div class="level">
    <div class="level-left"><h1 class="title is-3">Aufmaß-Typen</h1></div>
    <div class="level-right">
        <a class="button is-small is-light" href="javascript:history.back()">← Zurück</a>
    </div>
</div>

<div class="box">
    <table class="table is-fullwidth is-hoverable">
        <thead><tr><th>Name</th><th>Aktion</th></tr></thead>
        <tbody>
            {% for t in typen %}
            <tr>
                <td>
                    <span class="has-text-weight-bold">{{ t.name }}</span>
                    {% if t.company_id %}<span class="tag is-light is-small">eigen</span>{% endif %}
                </td>
                <td>
                    <button class="button is-small is-info is-outlined" onclick="editTyp({{ t.id }}, '{{ t.name }}')">Bearbeiten</button>
                    <form method="POST" action="{{ url_for('aufmass.typ_loeschen', typ_id=t.id) }}"
                          style="display:inline" onsubmit="return confirm('Typ wirklich löschen?')">
                        <button class="button is-small is-danger is-outlined">Löschen</button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>

    <details class="mt-3">
        <summary class="has-text-link">+ Neuen Typ anlegen</summary>
        <form method="POST" action="{{ url_for('aufmass.typ_neu') }}" class="mt-2 field has-addons">
            <div class="control">
                <input class="input" name="name" placeholder="Typ-Name" required>
            </div>
            <div class="control">
                <button class="button is-primary">Anlegen</button>
            </div>
        </form>
    </details>
</div>

<dialog id="edit-typ-dialog" class="box" style="border:none;border-radius:8px;padding:2rem;max-width:400px">
    <form method="POST" id="edit-typ-form">
        <h3 class="title is-5">Typ bearbeiten</h3>
        <div class="field">
            <label class="label">Name</label>
            <input class="input" name="name" id="edit-typ-name" required>
        </div>
        <div class="field is-grouped mt-3">
            <button class="button is-primary" type="submit">Speichern</button>
            <button class="button is-light" type="button" onclick="document.getElementById('edit-typ-dialog').close()">Abbrechen</button>
        </div>
    </form>
</dialog>

<script>
function editTyp(id, name){
    document.getElementById('edit-typ-name').value = name;
    document.getElementById('edit-typ-form').action = '/projekt/typen/' + id + '/edit';
    document.getElementById('edit-typ-dialog').showModal();
}
</script>
{% endblock %}