{% extends 'base.html' %} {% block head %}
<link rel="stylesheet" href="../static/nova_vaga.css" />
{% endblock %} {% block conteudo %}

<div class="container">
  <div class="header-page-vagas">
    <span id="header-field">Crie uma nova vaga</span>
  </div>

  <form method="post" id="formNovaVaga" action="/nova_vaga">
    <div class="form-group">
      <div class="form-row">
        <div class="form-group col-md-6">
          <label class="labelClass" for="inputCargo">Cargo</label>
          <input
            type="text"
            class="form-control"
            name="cargo"
            id="inputCargo"
            autocomplete="off"
            required
          />
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label class="labelClass" for="inputDept">Departamento</label>
          <input
            type="text"
            class="form-control"
            name="departamento"
            id="inputDept"
            autocomplete="off"
            required
          />
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label class="labelClass" for="inputLocal">Localização</label>
          <input
            type="text"
            class="form-control"
            name="localizacao"
            id="inputLocal"
            autocomplete="off"
            required
          />
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label class="labelClass" for="inputNivel">Nível</label>
          <select class="form-select" name="nivel" id="nivel" required>
            <option value="" disabled selected hidden>
              Selecione uma opção
            </option>
            <option value="Junior">Junior</option>
            <option value="Pleno">Pleno</option>
            <option value="Sênior">Sênior</option>
          </select>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="labelClass" for="inputDescricaoVaga"
            >Escopo da vaga</label
          >
          <textarea
            id="descricao"
            class="form-text-area"
            name="escopo"
            required
          ></textarea>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label class="labelClass" for="inputDescricaoVaga">Requisitos</label>
          <textarea
            id="descricao"
            class="form-text-area"
            name="requisitos"
            required
          ></textarea>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label class="labelClass" for="inputDescricaoVaga"
            >Qualificações e certificados</label
          >

          <textarea
            id="descricao"
            class="form-text-area"
            name="qualificacoes"
            required
          ></textarea>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group">
          <label class="labelClass" for="inputDescricaoVaga"
            >Informações adicionais</label
          >
          <textarea
            id="descricao"
            class="form-text-area"
            name="info-adicionais"
          ></textarea>
        </div>
      </div>

      <div class="form-button">
        <button type="submit" class="btn btn-primary btn-lg">Enviar</button>
      </div>
    </div>
  </form>
</div>
{% endblock %} {% block finalscript %}
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<script>
  autosize(document.getElementsByClassName("form-text-area"));
</script>
{% endblock %}