<!DOCTYPE html>
<html>
  <%- include('head.ejs', {title: 'Contacto'}); %>

  <body>
    <div class="container">
      <header><%- include('navbar.ejs'); %></header>

      <h3 class="text-center mt-3">Envie-nos um email</h3>

      <!-- Lado esquerdo do ecrã -->
      <div class="row justify-content-between">
        <div class="col-md-8">
          <div class="shadow-lg p-3 mt-3 bg-white rounded">
            <form action="/contactar" method="post">
              <!-- nome do membro da UMa-->
              <div class="form-group">
                <label for="nomeMembroUMa"
                  >Nome <span style="color: red">*</span></label
                >
                <% if(nome_error == true) { %>
                  <div>
                      <label for="nomeMembroUMa" class="text-danger">Campo obrigatório</label>
                  </div>
                <% } %>
                <input
                  type="text"
                  class="form-control mt-2"
                  name="nomeMembroUMa"
                  id="nomeMembroUMa"
                  placeholder="Nome"
                />
              </div>

              <!-- email do membro da UMa -->
              <div class="form-group mt-3">
                <label for="emailMembroUMa"
                  >Email <span style="color: red">*</span></label
                >
                <% if(email_error == true) { %>
                  <div>
                      <label for="emailMembroUMa" class="text-danger">Email inválido</label>
                  </div>
                <% } %>
                <input
                  type="text"
                  class="form-control mt-2"
                  name="emailMembroUMa"
                  id="emailMembroUMa"
                  placeholder="nome@email.com"
                />
              </div>

              <!-- assunto do email a enviar -->
              <div class="form-group mt-3">
                <label for="assuntoEmail"
                  >Assunto <span style="color: red">*</span></label
                >
                <% if(assunto_error == true) { %>
                  <div>
                      <label for="assuntoEmail" class="text-danger">Campo obrigatório</label>
                  </div>
                <% } %>
                <input
                  type="text"
                  class="form-control mt-2"
                  name="assuntoEmail"
                  id="assuntoEmail"
                  placeholder="Assunto"
                />
              </div>

              <!-- mensagem a enviar -->
              <div class="form-group mt-3">
                <label for="mensagemEmail"
                  >Mensagem <span style="color: red">*</span></label
                >
                <% if(mensagem_error == true) { %>
                  <div>
                      <label for="mensagemEmail" class="text-danger">Campo obrigatório</label>
                  </div>
                <% } %>
                <textarea
                  class="form-control mt-2"
                  name="mensagemEmail"
                  id="mensagemEmail"
                  rows="4"
                ></textarea>
              </div>

              <button type="submit" class="btn btn-outline-dark mt-3">Enviar</button>

              <% if (sended == true) { %>
              <p class="text-center mt-3">Email enviado com sucesso!!</p>
              <% } %>
            </form>
          </div>
        </div>

        <!-- Lado direito do ecrã -->
        <div class="col-md-4">
          <div class="shadow-lg p-3 mt-3 bg-white rounded">
            <img src="/img/bus2.jpg" class="img-thumbnail" />
            <p class="text-center mt-3">
              Caminho da Penteada, 9020-105 Funchal
            </p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
