{% extends 'base.html.twig' %}

{% block stylesheets %}
    <link rel="stylesheet" href="/css/style.css">
{% endblock %}
{% block menu %} {{ parent() }} {% endblock %}
{% block body %}

    <header class="masthead">
        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center text-center">
                <div class="col-lg-10 align-self-end">
                    <p class="text-white-75 font-weight-bold text-uppercase">You are evaluating : {{ player.kata }}</p>
                    <h4 class="text-uppercase text-white font-weight-bold mb-5">{{ player.student.name }}</h4>
                </div>
                <div class="col-lg-8 align-self-baseline pt-5 pb-3 scoring-box">

                    <form method="post" action="/evaluation/save" >
                        <input type="hidden" name="player" value="{{ player.id }}"/>
                        <div class="row">
                            <div class="col-6 right-middle-border mb-5">
                                <h4 class="text-uppercase text-white font-weight-bold mb-2">Technical</h4>
                                <div class="input-group mb-3 justify-content-center">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text bg-dark">
                                            <div class="dec button btnstripes dectech">-</div>
                                        </div>
                                    </div>
                                    <input type="text" name="tech-score" class="form-control eval-input" readonly="readonly" value="7.0" id="inlineFormInputGroupTech">
                                    <div class="input-group-append">
                                        <div class="input-group-text bg-dark">
                                            <div class="inc button btnstripes inctech">+</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-2 justify-content-center">
                                    <span class="btn btn-primary btn-md mr-5 clearTech">Default</span>
                                    <span class="btn btn-primary btn-md zeroTech">Zero</span>
                                </div>
                            </div>
                            <div class="col-6 col-sm">
                                <h4 class="text-uppercase text-white font-weight-bold mb-2">Athletic</h4>
                                <div class="input-group mb-3 justify-content-center">
                                    <div class="input-group-prepend">
                                        <div class="input-group-text bg-dark">
                                            <div class="dec button btnstripes decatl">-</div>
                                        </div>
                                    </div>
                                    <input type="text" name="atl-score" class="form-control eval-input" readonly="readonly" value="7.0" id="inlineFormInputGroupAtl">
                                    <div class="input-group-append">
                                        <div class="input-group-text bg-dark">
                                            <div class="inc button btnstripes incatl">+</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="input-group mb-2 justify-content-center">
                                    <span class="btn btn-primary btn-md mr-5 clearAtl">Default</span>
                                    <span class="btn btn-primary btn-md zeroAtl">Zero</span>
                                </div>
                            </div>
                        </div>

                        <p class="text-white font-weight-light mb-5">Score can't be changed once submitted</p>
                        <button class="btn btn-primary btn-xl">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </header>

{% endblock %}
{% block javascripts %}
    <script src="/js/incrementing.js"></script>
{% endblock %}