{% extends 'layouts/admin.twig' %}

{% block content %}

<ul class="breadcrumbs el">
    <li><a href="/admin/">Admin</a> /</li>
    <li><a href="{{ route('admin-review-types') }}">List of review types</a> /</li>
    <li class="end">
        {{ title }}
    </li>
</ul>

<h1>{{ title }}</h1>

{% include 'admin/reviewTypes/tabnav.twig' %}

<div class="js-vue-environment">
    <edit-review-type :review-type-data="{{ reviewType|json_encode }}"
                      :forms="{{ forms|json_encode }}"
                      :mediums="{{ mediums|json_encode }}"
                      :types="{{ types|json_encode }}"
                      :categories="{{ categories|json_encode }}"
                      :routes="{{ routes|json_encode }}"
                      inline-template
    >
        <div>
            <form class="style">
                <fieldset class="show">
                    <h1>
                        <a class="show el">
                            Details
                            <i class="fa fa-caret-right"></i>
                        </a>
                    </h1>
                    <div class="row"
                         :class="{'errorWrap showError' : errors.name}"
                    >
                        <label for="name">
                            Name
                        </label>
                        <input type="text"
                               id="name"
                               v-model="reviewType.name"
                        >
                        <div class="validationMessage"
                             v-if="errors.name"
                             v-html="errors.name"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.form_id}"
                    >
                        <label for="form_id">
                            Assessment Form
                        </label>
                        <select id="form_id"
                                v-model="reviewType.form_id"
                        >
                            <option :value="null">
                                -
                            </option>
                            <option v-for="form in forms"
                                    v-html="form.name"
                                    :value="form.id"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.form_id"
                             v-html="errors.form_id"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.medium}"
                    >
                        <label for="medium">
                            Medium
                        </label>
                        <select id="medium"
                                v-model="reviewType.medium"
                        >
                            <option :value="null">
                                -
                            </option>
                            <option v-for="(medium, key) in mediums"
                                    v-html="medium"
                                    :value="key"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.medium"
                             v-html="errors.medium"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.type}"
                    >
                        <label for="type">
                            Type
                        </label>
                        <select id="type"
                                v-model="reviewType.type"
                        >
                            <option :value="null">
                                -
                            </option>
                            <option v-for="(type, key) in types"
                                    v-html="type"
                                    :value="key"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.type"
                             v-html="errors.type"
                        ></div>
                    </div>

                    <div class="row"
                         :class="{'errorWrap showError' : errors.category_id}"
                    >
                        <label for="category_id">
                            Category
                        </label>
                        <select id="category_id"
                                v-model="reviewType.category_id"
                        >
                            <option :value="null">
                                -
                            </option>
                            <option v-for="category in categories"
                                    v-html="category.intended_name"
                                    :value="category.id"
                            ></option>
                        </select>
                        <div class="validationMessage"
                             v-if="errors.category_id"
                             v-html="errors.category_id"
                        ></div>
                    </div>
                </fieldset>
                <div class="success" v-if="success" v-html="success"></div>

                <input type="submit" value="Save" @click.prevent="store()" />
            </form>
        </div>
    </edit-review-type>
</div>

{% endblock %}