<!-- Create Project Modal Window -->
  <div id="addProjectModal" class="js-modal-window u-modal-window" style="width: 680px;">
    <form class="card mb-9">
      <!-- Header -->
      <header class="card-header bg-light py-3 px-5">
        <div class="row justify-content-between align-items-center no-gutters">
        <div class="col-3">
          <span class="small text-secondary">
            <span class="fas fa-rocket text-primary mr-1"></span>
            Ajouter un cours
          </span>
        </div>

        <div class="col-9 text-right">
          <!-- Icons -->
          <ul class="list-inline mb-0">
            <li class="list-inline-item mr-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Give feedback">
                <span class="far fa-life-ring btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mr-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="#" data-toggle="tooltip" data-placement="top" title="Unwatch">
                <span class="far fa-bell  btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mr-0">
              <!-- Settings Dropdown -->
              <div class="position-relative">
                <a id="createProjectSettingsDropdown1Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" role="button"
                   aria-controls="createProjectSettingsDropdown1"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="click"
                   data-unfold-target="#createProjectSettingsDropdown1"
                   data-unfold-type="css-animation"
                   data-unfold-duration="300"
                   data-unfold-delay="300"
                   data-unfold-hide-on-scroll="true"
                   data-unfold-animation-in="slideInUp"
                   data-unfold-animation-out="fadeOut">
                  <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                </a>

                <div id="createProjectSettingsDropdown1" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="createProjectSettingsDropdown1Invoker" style="min-width: 160px;">
                  <a class="dropdown-item" href="#">Log time</a>
                  <a class="dropdown-item" href="#">Add flag</a>
                  <a class="dropdown-item" href="#">Move</a>
                  <a class="dropdown-item" href="#">Clone</a>
                </div>
              </div>
              <!-- End Settings Dropdown -->
            </li>
            <li class="list-inline-item mr-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" onclick="Custombox.modal.close();">
                <span class="fas fa-times btn-icon__inner"></span>
              </a>
            </li>
          </ul>
          <!-- End Icons -->
        </div>
        </div>
      </header>
      <!-- End Header -->

      <div class="card-body pt-3 pb-5 px-5">
        <!-- Project Title -->
        <div class="d-sm-flex justify-content-sm-between align-items-sm-center no-gutters mb-3">
          <div class="">
            <div class="input-group input-group-borderless" style="width: 200%;">
              <input class="form-control" type="text" placeholder="Entrez le titre de la ressource" aria-label="Entrez le titre de la ressource">
            </div>
          </div>

        </div>
        <!-- End Project Title -->

        <!-- Status -->
        <div class="row mx-gutters-2 mb-3">
          <div class="col-sm-3 mb-3 mb-sm-0">
            <label class="form-label">Status</label>
            <!-- Select -->
            <select class="js-select selectpicker dropdown-select" data-width="100%" data-style="btn-soft-primary btn-sm">
              <option value="toDo">To Do</option>
              <option value="inProgress">In Progress</option>
              <option value="done">Done</option>
            </select>
            <!-- End Select -->
          </div>

          <div class="col-6 col-sm">
            <label class="form-label">Assignee</label>
            <!-- Select -->
            <select class="js-select selectpicker dropdown-select" title="Add assignee"
                    data-width="100%"
                    data-style="btn-sm bg-transparent text-secondary font-weight-normal px-0"
                    data-live-search="true"
                    data-searchbox-classes="input-group-sm">
              <option value="assignee1" data-tokens="user1" data-content='
                <span class="d-flex align-items-center">
                  <span class="u-xs-avatar mr-2">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img9.jpg" alt="Image Description">
                  </span>
                  <span>Sebastian Diaz</span>
                </span>'>
                Sebastian Diaz
              </option>



            </select>
            <!-- End Select -->
          </div>

          <div class="col-6 col-sm">
            <label class="form-label">Thématique
            </label>
            <!-- Select -->
            <select class="js-select selectpicker dropdown-select dropdown-select--right" title="Choose project"
                    data-width="100%"
                    data-style="btn-sm bg-transparent text-secondary font-weight-normal px-0"
                    data-live-search="true"
                    data-searchbox-classes="input-group-sm">

                    <%= Category.all.each do |cat|%>


              <option value=<%="cat.name-addcourse"%>>
                   <span class = <%="#{cat.icon.to_s}"%> >
                    <%= cat.name %>
                  </span>
              </option>



                    <% end %>

            </select>
            <!-- End Select -->
          </div>
        </div>
        <!-- End Status -->

        <!-- Input -->
        <textarea class="form-control" rows="3" placeholder="Add a description" aria-label="Add a description"></textarea>
        <!-- End Input -->

        <hr class="my-4">

        <!-- Assignee -->
        <div class="row">
          <div class="col-sm-5 mb-4 mb-sm-0">
            <label class="form-label">Reporter</label>
            <div class="media align-items-center">
              <div class="u-sm-avatar mr-2">
                <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
              </div>
              <div class="media-body">
                <h5 class="h6 font-weight-normal mb-0">Natalie Curtis</h5>
              </div>
            </div>
          </div>

          <div class="col-sm-7">
            <label class="form-label">Followers</label>
            <!-- Avatars -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item mb-1 mr-0">
                <a href="#">
                  <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Patrick Garner rounded-circle">
                  </div>
                </a>
              </li>
              <li class="list-inline-item ml-n3 mb-1 mr-0">
                <a href="#">
                  <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Amanta Owens">
                  </div>
                </a>
              </li>
              <li class="list-inline-item ml-n3 mb-1 mr-0">
                <a href="#">
                  <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
                  </div>
                </a>
              </li>
              <li class="list-inline-item ml-n3 mb-1 mr-0">
                <a href="#">
                  <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
                  </div>
                </a>
              </li>
              <li class="list-inline-item ml-n3 mb-1 mr-0">
                <a href="#">
                  <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img6.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="James Collins">
                  </div>
                </a>
              </li>
              <li class="list-inline-item ml-n3 mb-1 mr-0">
                <a href="#">
                  <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img7.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Josephina Mack rounded-circle">
                  </div>
                </a>
              </li>
              <li class="list-inline-item ml-n3 mb-1 mr-0">
                <a href="#">
                  <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img8.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Sean Lewis">
                  </div>
                </a>
              </li>
              <li class="list-inline-item ml-n3 mb-1 mr-0">
                <a href="#">
                  <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                    <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img9.jpg" alt="Image Description" data-toggle="tooltip" data-placement="top" title="Sebastian Diaz rounded-circle">
                  </div>
                </a>
              </li>
              <li class="list-inline-item ml-n3 mb-1 mr-0">
                <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
                  <span class="btn-icon__inner">+3</span>
                </a>
              </li>
            </ul>
            <!-- End Avatars -->
          </div>
        </div>
        <!-- End Assignee -->

        <hr class="my-4">

        <!-- Details -->
        <div class="row justify-content-between">
          <div class="col-6 col-sm-4 mb-4 mb-sm-0">
            <label class="form-label">Due date</label>
            <!-- Datepicker -->
            <div id="datepickerWrapper" class="u-datepicker input-group input-group-sm input-group-borderless">
              <div class="input-group-prepend">
                <span class="input-group-text p-0 mr-2">
                  <span class="fas fa-calendar" id="dueDate"></span>
                </span>
              </div>
              <input class="js-range-datepicker form-control bg-transparent px-1" type="text" placeholder="Due date" aria-label="Due date" aria-describedby="dueDate"
                     data-rp-wrapper="#datepickerWrapper"
                     data-rp-date-format="d/m/Y">
            </div>
            <!-- End Datepicker -->
          </div>

          <div class="col-6 col-sm-4 mb-4 mb-sm-0">
            <label class="form-label">Priority</label>
            <!-- Select -->
            <select class="js-select selectpicker dropdown-select w-100" data-style="btn-sm bg-transparent font-weight-normal px-0">
              <option value="priorityHighest" data-icon="fas fa-arrow-up text-danger small mr-2">Highest</option>
              <option value="priorityHigh" data-icon="fas fa-arrow-up text-danger small mr-2">High</option>
              <option value="priorityMedium" data-icon="fas fa-arrow-up text-warning small mr-2" selected>Medium</option>
              <option value="priorityLow" data-icon="fas fa-arrow-down text-success small mr-2">Low</option>
              <option value="priorityLowest" data-icon="fas fa-arrow-down text-success small mr-2">Lowest</option>
            </select>
            <!-- End Select -->
          </div>

          <div class="col-sm-4">
            <label class="form-label">Budget</label>
            <div class="input-group input-group-sm input-group-borderless">
              <input class="form-control p-0" type="text" placeholder="Project budget" aria-label="Project budget">
            </div>
          </div>
        </div>
        <!-- End Details -->

        <hr class="my-4">

        <!-- Label Input -->
        <label class="form-label">Labels</label>
        <div class="u-tagsinput">
          <input type="text" value="HTML5, CSS3" data-role="tagsinput">
        </div>
        <!-- End Label Input -->

        <hr class="my-4">

        <!-- Comments -->
        <div class="mb-3">
          <label class="form-label">Comments</label>
          <div class="media">
            <div class="u-sm-avatar mr-2">
              <img class="img-fluid rounded-circle" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
            </div>
            <div class="media-body">
              <textarea class="form-control" rows="2" placeholder="Add a comment" aria-label="Add a comment"></textarea>
            </div>
          </div>
        </div>
        <!-- End Comments -->

        <!-- Buttons -->
        <div class="d-flex justify-content-end">
          <button type="submit" class="btn btn-sm btn-primary transition-3d-hover mr-1">Save</button>
          <button type="submit" class="btn btn-sm btn-soft-secondary transition-3d-hover" onclick="Custombox.modal.close();">Cancel</button>
        </div>
        <!-- End Buttons -->
      </div>
    </form>
  </div>
  <!-- End Create Project Modal Window -->