{% macro input(value="") %}
    <div class="container content">
        <h2 class="center">Shorten</h2>
        <div class="box">
            <form class="form" action="/" method="get">
                <div class="field is-horizontal">
                    <div class="field-label is-normal">
                        <label class="label">URL:</label>
                    </div>
                    <div class="field-body">
                        <div class="field">
                            <p class="control is-expanded">
                                <input class="input" type="text" value="{{ value }}" name="url">
                            </p>
                        </div>
                        <div class="field">
                            <p class="control is-expanded">
                                <button class="button is-primary" type="submit">Shorten!</button>
                            </p>
                        </div>
                        <div class="field">
                            <p class="control is-expanded">
                                <a class="button is-info" onclick="toggleInputExtraOptions(this)">Show options</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div id="inputExtraOptions" class="is-hidden">
                    <div class="field is-horizontal">
                        <div class="field-label is-normal">
                            <label class="label">Key:</label>
                        </div>
                        <div class="field-body">
                            <div class="field">
                                <p class="control is-expanded">
                                    <input class="input" type="password" name="key">
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="field is-horizontal has-addons">
                        <div class="field-label is-normal">
                            <label class="label">Delete after:</label>
                        </div>
                        <div class="field-body">
                            <div class="field">
                                <p class="control is-expanded">
                                    <input class="input" type="number" name="time">
                                </p>
                            </div>
                            <div class="select">
                                <select name="unit">
                                    <option>Seconds</option>
                                    <option>Minutes</option>
                                    <option>Hours</option>
                                    <option>Days</option>
                                    <option>Weeks</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script>
    function toggleInputExtraOptions(ctx) {
        let i = document.getElementById('inputExtraOptions');
        if(i.classList.contains("is-hidden")) {
            i.classList.remove("is-hidden");
            ctx.innerText = "Hide options";
        } else {
            i.classList.add("is-hidden");
            ctx.innerText = "Show options";
        }
    }
    </script>
{% endmacro %}