<form method="POST" action="/new_ticket" class="w-full max-w-md">

    <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-grey-darker text-xs font-bold mb-2" for="grid-first-name">
          Titre
        </label>
        <input name="title" class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" placeholder="VNikos">

        <!-- <p class="text-grey-dark text-xs italic">Pseudo in-game</p> -->
      </div>

      <div class="w-full md:w-1/2 px-3">

        <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-last-name">
          Date
        </label>

        <input name="category" class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-grey" id="grid-last-name" type="text" placeholder="01 Janvier 2018">

        <p class="text-grey-dark text-xs italic" style="margin-top: 4%;">Date de l'incident</p>

      </div>
     <!-- ICI -->

    <div class="flex content-between flex-wrap">
      <div class="w-1/3 p-2 text-grey-darker">

        <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
          Prioritée
        </label>

        <div class="inline-block text-xs relative w-64 h-4">
            <select name="priority" class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
              <option>Urgent</option>
              <option>Important</option>
              <option>Normale</option>
            </select>
            <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
              <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
            </div>
          </div>
      </div>


    <div class="flex content-between flex-wrap ml-20">
        <div class="w-1/3 p-2 text-grey-darker">

          <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
            Catégorie
          </label>

          <div class="inline-block text-xs relative w-64 h-4">
              <select name="category" class="block appearance-none w-full bg-white border border-grey-light hover:border-grey px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline">
                <option>Report</option>
                <option>Bug</option>
                <option>Réclamation</option>
              </select>
              <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
                <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>

    <div class="flex flex-wrap -mx-3 mb-6">
        <div class="w-full px-3">
          <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
            Preuves
          </label>
          <input name="message" class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-grey" placeholder="Preuve en vidéo et/ou image">
          <p class="text-grey-dark text-xs italic">Lien vers une vidéo</p>
        </div>
      </div>
    <div class="md:flex mb-6">
      <div class="md:flex-1 mt-2 mb:mt-0 md:px-3">
          <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
              Raison du report
            </label>
        <textarea name="reason" class="w-full shadow-inner p-4 border-0" placeholder="Raison" rows="6"></textarea>
      </div>
    </div>
    <button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
        ENVOYER
      </button>
    </div>
      {{ csrfField() }}
  </form>
</div>