<form class="w-full max-w-lg float-right" method="post" action="{{ path('courses_post') }}">
    <h2 class="block uppercase tracking-wide text-gray-700 text-3xl font-bold mb-2">Crear curso</h2>
    <div class="flex flex-wrap mb-6 -mx-3">
        <div class="w-full md:w-full px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
                Identificador
            </label>
            <input class="{% if flash.has('errors.id') %}border border-red-500{% endif %} appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                   id="grid-first-name" type="text" name="id" placeholder="En formado UUID"
                   value="{{ flash.get('inputs.id', new_course_id) }}">

            {% if flash.has('errors.id') %}
                <p class="text-red-500 text-xs italic">{{ flash.get('errors.id') }}</p>
            {% endif %}
        </div>
    </div>
    <div class="flex flex-wrap -mx-3 mb-6">
        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
                Nombre
            </label>
            <input class="{% if flash.has('errors.name') %}border border-red-500{% endif %} appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                   id="grid-first-name" type="text" name="name" placeholder="DDD en PHP"
                   value="{{ flash.get('inputs.name') }}">

            {% if flash.has('errors.name') %}
                <p class="text-red-500 text-xs italic">{{ flash.get('errors.name') }}</p>
            {% endif %}
        </div>
        <div class="w-full md:w-1/2 px-3">
            <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
                Duración (en inglés)
            </label>
            <input class="{% if flash.has('errors.duration') %}border border-red-500{% endif %} appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                   id="grid-last-name" type="text" name="duration" placeholder="8 days"
                   value="{{ flash.get('inputs.duration') }}">
            {% if flash.has('errors.duration') %}
                <p class="text-red-500 text-xs italic">{{ flash.get('errors.duration') }}</p>
            {% endif %}
        </div>
    </div>
    <div class="flex flex-wrap mb-6">
        <button class="md:w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                type="submit">
            Crear curso!
        </button>
    </div>
</form>
