{% extends "default.html" %}
{% block title %}{{ app.name }} | Echo Tracker{% endblock %}
{% block content %}
    <main>
        <h1>Editing {{ app.name }}</h1>
        <h2>General</h2>
        <form class="stacked-form" method="post" action="/app/{{ app.id }}/edit/">
            <input type="text" name="name" placeholder="Name" value="{{ app.name }}">
            <label>
                Stability threshold (minutes)
                <input type="number" name="threshold" value="{{ app.stability_threshold }}" step="1" min="1" max="300">
            </label>
            <button type="submit">Apply changes</button>
        </form>
        <h2>Endpoints</h2>
        <div id="endpoint-editor">
            {% for endpoint in app.endpoints %}
                <form class="stacked-form" method="post" action="/app/{{ app.id }}/edit/{{ endpoint.id }}">
                    <input type="text" name="name" placeholder="Name" value="{{ endpoint.name }}">
                    <input type="url" name="url" placeholder="Ping address" value="{{ endpoint.address }}">
                    <div class="side-by-side">
                        <input class="extend" type="number" name="ping_interval" placeholder="Interval (seconds)" value="{{ endpoint.ping_interval }}" step="1" min="15">
                        seconds
                    </div>
                    <textarea name="comment" placeholder="Comment" rows="4">{{ endpoint.comment }}</textarea>
                    <div class="side-by-side">
                        <button type="submit" class="extend">Apply changes</button>
                        <button type="submit" name="delete" value="delete" class="danger-button">
                            <iconify-icon icon="mdi:trash-can">Delete</iconify-icon>
                        </button>
                    </div>
                </form>
            {% endfor %}
        </div>
        <h2>Add an endpoint</h2>
        <form class="stacked-form" method="post" action="/app/{{ app.id }}/add-endpoint">
            <input type="text" name="name" placeholder="Name">
            <input type="url" name="url" placeholder="Ping address">
            <div class="side-by-side">
                <input class="extend" type="number" name="ping_interval" placeholder="Interval (seconds)" value="300" step="1" min="15">
                seconds
            </div>
            <textarea name="comment" placeholder="Comment" rows="4"></textarea>
            <button type="submit">Add</button>
        </form>
    </main>
{% endblock %}