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

{% block content %}
<div class="container-fluid p-0">
  <div class="container pt-5">
    <div class="row">
      <div class="col-lg-3 col-responsive">
        {% include 'shared/menu.html.twig' %}
      </div>
      <div class="col-lg-9">
        <div class="mt-3">
          <h5 class="card-header-title">Ajout un nouveau cours </h5>
        </div>
                {{ form_start(newCourseForm,
        {'action': path('user_add_courses'), 'method': 'POST','attr': { 'novalidate': 'novalidate' }}) }}
        <div class="row mt-4 mb-4">
          <label for="emailLabel" class="col-sm-3 col-form-label form-label">Titre *</label>
          <div class="col-sm-9">
            {{ form_widget(newCourseForm.title, { 'attr': {'placeholder': 'Titre*'} }) }}
            {{ form_errors(newCourseForm.title) }}
          </div>
        </div>
        <div class="row mb-4">
          <label class="col-sm-3 col-form-label form-label">Description *</label>
          <div class="col-sm-9">
            <div class="input-group">
              {{ form_widget(newCourseForm.description, { 'attr': {'placeholder': 'Description*'} }) }}
              {{ form_errors(newCourseForm.description) }}
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <label for="pictureLabel" class="col-3 col-form-label form-label">Catégorie *</label>
          <div class="col-sm-9">
            <div class="input-group">
              {{ form_widget(newCourseForm.category) }}
              {{ form_errors(newCourseForm.category) }}
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <label for="pictureLabel" class="col-3 col-form-label form-label align-self-center">Photo</label>
          <div class="col-sm-9">
          <div id="uploadimgformation" class="dz-dropzone-card text-center p-4">
            <div class="dz-message">
              <img class="mb- py-23 w-25 px-5" src="{{asset('build/images/add-file.svg')}}" alt="Image Description">
              <span class="d-block">Parcourez votre appareil et sélectionnez une image orientée paysage</span>
              <span class="d-block text-muted small">Les images carrées ou portraits ne seront pas autorisées</span>
            </div>
              <img id="img_preview_new" src=""
                class="card-img-top w-50 rounded-3 mt-3 hide" alt="course">
          </div>
        </div>
          <div class="col-sm-6 align-self-center">
            <div class="input-group">
              {{ form_widget(newCourseForm.image) }}
              {{ form_errors(newCourseForm.image) }}
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <label class="col-sm-3 col-form-label form-label align-self-top">Langue *</label>
          <div class="col-sm-4 mt-2">
            <div class="input-group">
              {{ form_widget(newCourseForm.language) }}
              {{ form_errors(newCourseForm.language) }}
            </div>
          </div>
          <label class="col-sm-2 col-form-label form-label align-self-top">Niveau *</label>
          <div class="col-sm-3 mt-2">
            <div class="input-group">
              {{ form_widget(newCourseForm.skills) }}
              {{ form_errors(newCourseForm.skills) }}
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <label class="col-3 col-form-label form-label align-self-center">Document *</label>
          <div class="col-sm-9">
            <div id="uploaddocNewformation" class="dz-dropzone-card text-center p-4">
              <div class="dz-message">
                <img class="mb- py-23 w-25 px-5" src="{{asset('build/images/add-file.svg')}}" alt="Image Description">
                <span class="d-block">Parcourez votre appareil et sélectionnez un document word</span>
                <span class="d-block text-muted small">Les autres formats de document ne seront pas acceptés</span>
                <span id="selectedfile" class="d-block text-muted small"></span>
              </div>
            </div>
          </div>
            <div class="col-sm-6 align-self-center">
              <div class="input-group">
                {{ form_widget(newCourseForm.document) }}
                {{ form_errors(newCourseForm.document) }}
              </div>
            </div>
        </div>
        <div class="home-card-footer mt-5 pb-5">
          <div class="d-flex justify-content-between gap-3">
            <div class="text-muted fst-italic champ-obligatoire">
            * Champ obligatoire
            </div>
            <div class="d-flex justify-content-end gap-3">
              <button class="btn btn-secondary" type="reset">
                <svg  width="20" height="20" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                </svg>
                Annuler</button>
              <button type="submit" class="btn btn-primary">
                <svg idth="20" height="20" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                </svg>
              Ajouter</button>
            </div>
          </div>
        {{ form_end(newCourseForm) }}
      </div>
    </div>
  </div>
</div>
{% endblock %}