{% extends "base/layout.html" %}
{% block main %}
{{ super() }}

<div>
    <h1>Callback </h1>

    <button onclick="navigator.clipboard.writeText(window.location.origin + '{{ url_for('hook',  uuid=callback.uuid) }}');">Copy URL</button>
    <button onclick="window.location.href='{{ url_for('schedule',  uuid=callback.uuid) }}';">Manage schedule</button>
    <button onclick="window.location.href='{{ url_for('triggers',  uuid=callback.uuid) }}';">See triggers</button>

    <form action="{{url_for('save_callback', uuid=callback.uuid) }}" method="POST" id="callback-form">
        <h3>Details</h3>
        <p>
            <label for="uuid">UUID</label><br>
            <input type="text" name="uuid" value="{{callback.uuid}}" disabled>
        </p>
        <p>
            <label for="name">Name</label><br>
            <input type="text" name="name" value="{{callback.name}}" maxlength="64" required><br>
            This will be shown to the user when they open the link.
        </p>

        <h3>Home Assistant</h3>
        <p>
            <label for="domain">Domain</label><br>
            <select name="domain" id="domain-select" onchange="getDomainData();"> 
                {% for domain in domains.keys() %}
                    <option value="{{ domain }}" {% if domain == callback.domain %}selected{% endif %}>{{ domain }}</option>
                {% endfor %}
            </select>
        </p>
        <p>
            <label for="service">Service</label><br>
            <select name="service" id="service-select" onchange="getServiceFields(true);">
                {% for service in services %}
                <option value="{{ service.service_id }}" {% if service.service_id == callback.service %}selected{% endif %}>{% if service.name is not none %}{{ service.name }}{% else %}{{service.service_id}}{% endif %}</option>
                {% endfor %}
            </select>
            <details>
                <summary>Service fields</summary>
                <p id="service-fields"></p>
            </details>
        </p>
        <p id="entity-area">
            <label for="entity">Target entity</label><br>
            <select name="entity" id="entity-select">
                {% for entity in entities %}
                <option value="{{ entity }}" {% if entity == callback.entity %}selected{% endif %}>{{entity}}</option>
                {% endfor %}
            </select>
        </p>
        <p id="data-area">
            <label for="data">Data</label><br>
            <textarea name="data" id="data" form="callback-form">{{callback.data}}</textarea>
        </p>

        <h3>Note</h3>
        <p>This will be shown to the user when they open the link.</p>
        <p>
            <textarea name="note" form="callback-form">{{callback.note}}</textarea>
        </p>

        <h3>Settings</h3>
        <p>
            <label>Active</label><br>
            <label><input name="active" type="checkbox" value="true" {% if callback.active == True %}checked{% endif %}/> Active</label> <br>
        </p>
        <input type="submit" value="Submit">
    </form>
    
</div>

<script src="{{ url_for('static', filename='callback.js') }}"></script>
{% endblock %}