{% 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">Modification cours</h5>
        </div>
        {{ form_start(formationForm,
        {'action': path('user_edit_courses', {'id': courses.id }), 'method': 'POST','attr': { 'novalidate':
        'novalidate' }}) }}
        <div class="row mb-4 mt-4">
          <label for="emailLabel" class="col-sm-3 col-form-label form-label">Titre *</label>
          <div class="col-sm-9">
            {{ form_widget(formationForm.title, { 'attr': {'placeholder': 'Titre*'} }) }}
            {{ form_errors(formationForm.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(formationForm.description) }}
              {{ form_errors(formationForm.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(formationForm.category) }}
              {{ form_errors(formationForm.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="uploadimgEditformation" 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>
            {% if courses.image is not null %}
              <img id="img_preview" src="{{asset('images/formation/' ~ courses.image)}}"
                class="card-img-top w-50 rounded-3 mt-3" alt="course">
            {% endif %}
          </div>
        </div>
          <div class="col-sm-6 align-self-center">
            <div class="input-group">
              {{ form_widget(formationForm.image) }}
              {{ form_errors(formationForm.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(formationForm.language) }}
              {{ form_errors(formationForm.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(formationForm.skills) }}
              {{ form_errors(formationForm.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="uploaddocEditformation" 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(formationForm.document) }}
                {{ form_errors(formationForm.document) }}
              </div>
            </div>
          <div class="col-sm-3 align-self-center mt-4">
            {% if courses.document is defined and courses.document is not null %}
            <a target="blanc" class="btn btn-primary form-control"
              href="{{asset('document/'~ courses.document)}}">
              Voir document
              <svg width="20" height="20" fill="currentColor" class="bi bi-download ms-2 mb-1" viewBox="0 0 16 16">
                <path
                  d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z">
                </path>
                <path
                  d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z">
                </path>
              </svg>
            </a>
            {% endif %}
          </div>
        </div>
        <div class="row mb-4">
          <label class="col-3 col-form-label form-label">Statut</label>
          <div class="col-sm-9">
            <div class="input-group">
              {{ form_widget(formationForm.active) }}
              {{ form_errors(formationForm.active) }}
            </div>
          </div>
        </div>
        <div class="home-card-footer m-3 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">
              <a type="button" class="btn btn-primary" href="{{ path('user_list_courses') }}">
                <svg width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-left" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4z"/>
                </svg>
              Retour</a>
              <button type="submit" class="btn btn-primary">
                <svg width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                  <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
                </svg>
              Modifier</button>
            </div>
          </div>
        </div>
        {{ form_end(formationForm) }}
      </div>
    </div>
  </div>
</div>
{% endblock %}