{% extends "index.twig" %}

{% block title %}Athlete{% endblock %}

{% block content %}
<div class="uk-container uk-margin">
    <h1 class="uk-article-title">Athlete</h1>
    {{ block("messages_queue", "message_queue.twig") }}
    <form class="uk-form-stacked" action="{{ route() }}edit{{ form.post_key|default('') }}" method="post">
        <div class="uk-button-group uk-width-1-1 uk-margin">
            <input type="submit" class="uk-button uk-button-primary uk-width-1-2" value="Save"/>
            <a href="{{ route() }}" type="button" class="uk-button uk-button-danger uk-width-1-2">Close</a>
        </div>
        <div class="uk-child-width-1-2 uk-margin" uk-grid>
            <div>
                <label class="uk-form-label">Name</label>
                <div class="uk-form-controls">
                    <input name="name" class="uk-input uk-width-1-1" type="text" placeholder="Add the name here..." value="{{ form.name|default('') }}">
                </div>
            </div>
            <div>
                <label class="uk-form-label">Age</label>
                <div class="uk-form-controls">
                    <input name="age" class="uk-input uk-width-1-1" type="text" placeholder="Your age..." value="{{ form.age|default('') }}">
                </div>
            </div>
        </div>
        <div>
            <label class="uk-form-label">Sport</label>
            <div class="uk-form-controls">
                <input name="sport" class="uk-input uk-width-1-1" type="text" placeholder="Your sport name..." value="{{ form.sport|default('') }}">
            </div>
        </div>
        <input type="hidden" name="item_id" value="{{ form.id|default(0) }}">
    </form>
</div>
<script>
    ClassicEditor.create(document.querySelector(`#item-text`), {
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
            ]
        }
    }).catch(error => { console.error(error);});
</script>
{% endblock %}