<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#41414C" />
    <link rel="shortcut icon" href="images/favicon.png" type="image/png" />
    <title>JobsCalc</title>

    <link rel="stylesheet" href="/styles/main.css" />
    <link rel="stylesheet" href="/styles/partials/page-header.css" />
    <link rel="stylesheet" href="/styles/partials/cards.css" />
    <link rel="stylesheet" href="/styles/partials/buttons.css" />
    <link rel="stylesheet" href="/styles/partials/modal.css" />
    <link rel="stylesheet" href="/styles/partials/animations.css" />
    <link rel="stylesheet" href="/styles/pages/index.css" />

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap"
      rel="stylesheet"
    />

    <script src="scripts/index.js" defer type="module"></script>
  </head>
  <body id="page-index">
    <header class="page-header">
      <div class="container">
        <section id="top" class="animate-up">
          <h2 class="sr-only">Homepage</h2>
          <img id="logo" src="/images/logo.svg" alt="Logo" />
          <span id="notification">
            <img src="/images/alert-octagon.svg" alt="Alerta" />
            <% if (freeHours <= 0) { %>
            Você não tem horas livres no seu dia
            <% } else { %>
            Você tem <%= freeHours %> horas livres no seu dia
            <% } %>
          </span>
          <a href="profile" id="avatar-profile">
            <p><%= profile.name %> <span>Ver perfil</span></p>
            <img
              src="<%= profile.avatar %>"
            />
          </a>
        </section>

        <div class="separator"></div>

        <section id="summary" class="animate-up delay-1">
          <h2 class="sr-only">Sumário</h2>

          <div class="info">
            <div class="total">
              <strong><%= statusCount.total %></strong>
              Projetos ao total
            </div>
            <div class="in-progress">
              <strong><%= statusCount.progress %></strong>
              Em andamento
            </div>
            <div class="finished">
              <strong><%= statusCount.done %></strong>
              Encerrados
            </div>
          </div>
          <a class="button orange" href="job">
            <span>
              <img src="/images/plus-24.svg" alt="Novo Job" /> 
            </span>
            Adicionar novo job
          </a>
        </section>
      </div>
    </header>

    <div class="container">
      <main class="animate-up delay-2">
        <h1 class="sr-only">Trabalhos</h1>

        <div class="cards">
          <% jobs.forEach(job => { %>
            <div class="card <%= job.status %>" data-id="<%= job.id %> ">
              <div class="id column"><%= job.id %></div>
              <div class="name column">
                <%= job.name %>
              </div>
              <div class="deadline column">
                <span>Prazo</span>
                <p>
                  <% if (job.status == 'progress') { %>
                    <%= job.remaining %> dias para a entrega
                  <% } else { %>
                    Prazo encerrado
                  <% } %>
                  
                </p>
              </div>
              <div class="amount column">
                <span>Valor</span>
                <p>R$ <%= job.budget %></p>
              </div>
              <div class="status badge column">
                <%= job.status === 'done' ? "Encerrado" : "Em andamento" %>
              </div>
              <div class="actions column flex">
                <p class="sr-only">Ações</p>
                <a 
                  href="/job/<%= job.id %>" 
                  class="button white edit" 
                  title="Editar Job">
                  <img src="/images/edit-24.svg" alt="Editar Job" />
                </a>
                <button class="delete button white" title="Excluir Job">
                  <img src="/images/trash-24.svg" alt="Excluir Job" />
                </button>
              </div>
            </div>
          <% }) %>
          <!-- end card -->
        </div>
        <!-- end cards -->
      </main>
    </div>
    <!-- end container -->

    <div class="modal-wrapper">
      <div class="modal">
        <img src="/images/trash-48.svg" alt="Excluir Job" title="Excluir Job" />
        <h3>Excluir Job</h3>
        <p>Quer mesmo excluir esse job? <br/>
        Ele será apagado para sempre.  
        </p>
        <footer>
          <a 
            class="button gray" 
            href="#">Cancelar</a>
          <button
            class="button red"
            type="submit"
            form="delete-job">Excluir Job</button>
        </footer>
      </div>
      <form 
        method="post" 
        action="/job/delete" 
        id="delete-job"></form>
    </div>
    <!-- end modal-wrapper -->
  </body>
</html>
