{{#> layout}}
    {{#*inline "title"}}
        Feattle {{ key }}
    {{/inline}}
    {{#*inline "content"}}
        <h1>{{ key }}</h1>

        {{#if reload_failed }}
            <div class="alert alert-warning">
                <h4 class="alert-heading">Synchronization failed</h4>
                Failed to reload fresh data from the underlying persistence source.<br>
                The values shown in this page reflect the state in memory of this instance,
                that may or may not be the desired state.
            </div>
        {{/if}}

        <p>{{ description }}</p>
        <p>
            <strong>Type</strong>: <code>{{ format }}</code><br>
            <strong>Last modification</strong>: {{ last_modification }}<br>
            <strong>Current value</strong>: <code>{{ value_overview }}</code>
        </p>

        <div class="alert alert-warning alert-dismissible" id="clipboard_error"
             style="display: none">
            <p>
                The clipboard API is not available in this window, please make sure to serve this page with HTTPS.<br>
                Here's the full content that you tried to copy:
            </p>
            <pre id="clipboard_error_content"></pre>
            <button class="close" id="close_clipboard_error">&times;</button>
        </div>

        <div class="alert alert-danger alert-dismissible" id="validation_error"
             style="display: none">
            The entered value is not valid:<br>
            <strong id="validation_error_details"></strong>
            <button class="close" id="close_validation_error">&times;</button>
        </div>
        <form action="/feattle/{{ key }}/edit" method="post" id="form">
            <input name="value_json" id="value_json" type="hidden">
            <div id="editor" data-format="{{ format_json }}" data-value="{{ value_json }}"
                 class="my-2"></div>
            <div>
                <a class="btn btn-secondary" href="/">Go back</a>
                <button type="submit" class="btn btn-primary">Save</button>
            </div>
        </form>

        <h2 class="my-3">History</h2>
        <table class="table table-striped table-dark table-hover">
            <thead>
            <tr>
                <th scope="col">Modified at</th>
                <th scope="col">Modified by</th>
                <th scope="col">Value</th>
                <th scope="col"></th>
            </tr>
            </thead>
            <tbody>
            {{#each history}}
                <tr>
                    <th scope="row">{{ this.modified_at }}</th>
                    <td>{{ this.modified_by }}</td>
                    <td>{{ this.value_overview }}</td>
                    <td><button type="button" class="btn btn-info" data-history="1" data-value="{{ this.value_json }}">Copy</button></td>
                </tr>
            {{/each}}
            </tbody>
        </table>

        <script>
            'use strict'
            let feattleEditor
            $(() => {
                // Editor
                feattleEditor = new FeattleEditor($('#editor'))
                $('#close_validation_error').click(() => $('#validation_error').hide())
                $('#form').submit(() => {
                    try {
                        let value = feattleEditor.getValue()
                        $('#value_json').val(JSON.stringify(value))
                    } catch (error) {
                        $('#validation_error').show()
                        $('#validation_error_details').text(error.message)
                        return false
                    }
                })

                // History
                $('button[data-history]').click(function () {
                    let value = JSON.parse($(this).attr('data-value'))
                    let content = JSON.stringify(value, null, 4)
                    if (navigator.clipboard) {
                        navigator.clipboard.writeText(content)
                    } else {
                        $('#clipboard_error').show()
                        $('#clipboard_error_content').text(content)
                    }
                })
            })
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" crossorigin="anonymous"
                integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q=="
                referrerpolicy="no-referrer"></script>
    {{/inline}}
{{/layout}}