{% extends "default.html" %}
{% block title %}{{ app.name }} | Echo Tracker{% endblock %}
{% block content %}
    <main>
        <h1>Editing {{ app.name }}</h1>
        <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 }}">
                    <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">
            <textarea name="comment" placeholder="Comment" rows="4"></textarea>
            <button type="submit">Add</button>
        </form>
    </main>
{% endblock %}