{% extends 'base.html' %}

{% block content %}
<div class="edit-form">


    <form class="pure-form pure-form-stacked" action="/edit/{{uuid}}" method="POST">
        <fieldset>
            <div class="pure-control-group">
                <label for="url">URL</label>
                <input type="url" id="url" required="" placeholder="https://..." name="url" value="{{ watch.url}}"
                       size="50"/>
                <span class="pure-form-message-inline">This is a required field.</span>
            </div>
            <div class="pure-control-group">
                <label for="tag">Tag</label>
                <input type="text" placeholder="tag" size="10" id="tag" name="tag" value="{{ watch.tag}}"/>
                <span class="pure-form-message-inline">Grouping tags, can be a comma separated list.</span>
            </div>

            <!-- @todo: move to tabs --->
            <fieldset class="pure-group">
                <label for="ignore-text">Ignore text</label>

                <textarea id="ignore-text" name="ignore-text" class="pure-input-1-2" placeholder=""
                          style="width: 100%;
                            font-family:monospace;
                            white-space: pre;
                            overflow-wrap: normal;
                            overflow-x: scroll;" rows="5">{% for value in watch.ignore_text %}{{ value }}
{% endfor %}</textarea>
                <span class="pure-form-message-inline">Each line will be processed separately as an ignore rule.</span>

            </fieldset>

            <!-- @todo: move to tabs --->
            <fieldset class="pure-group">
                <label for="headers">Extra request headers</label>

                <textarea id="headers" name="headers" class="pure-input-1-2" placeholder="Example
Cookie: foobar
User-Agent: wonderbra 1.0"
                          style="width: 100%;
                            font-family:monospace;
                            white-space: pre;
                            overflow-wrap: normal;
                            overflow-x: scroll;" rows="5">{% for key, value in watch.headers.items() %}{{ key }}: {{ value }}
{% endfor %}</textarea>
                <br/>

            </fieldset>


            <div class="pure-control-group">
                <button type="submit" class="pure-button pure-button-primary">Save</button>
            </div>
            <br/>

            <div class="pure-control-group">
                <a href="/" class="pure-button button-small button-cancel">Cancel</a>
                <a href="/api/delete?uuid={{uuid}}"
                   class="pure-button button-small button-error ">Delete</a>

            </div>


        </fieldset>
    </form>


</div>

{% endblock %}