<!DOCTYPE html>
<html lang="es">
  <head>
    <%- include('../partials/head.ejs') %>
  </head>
  <body>
    <%- include('../partials/header.ejs') %>

    <main class="container my-4 main d-flex justify-content-center">
      <% if (forms.length > 0) { %>
      <div class="list-group w-50 text-center">
        <% forms.forEach(form => { %>
        <a
          class="list-group-item list-group-item-action"
          href="/forms/<%= form._id %>/responses"
          ><%= form.title %></a
        >
        <% }) %>
      </div>
      <% } else { %>
      <svg xmlns="http://www.w3.org/2000/svg" style="display: none">
        <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
          <path
            d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
          />
        </symbol>
      </svg>

      <!-- Info -->
      <div class="d-block">
        <div class="alert alert-primary d-flex align-items-center" role="alert">
          <svg
            class="bi flex-shrink-0 me-2"
            width="24"
            height="24"
            role="img"
            aria-label="Info:"
          >
            <use xlink:href="#info-fill" />
          </svg>
          <div>
            Todavía no has creado ningún formulario,
            <a class="alert-link" href="/forms">empieza ahora</a>.
          </div>
        </div>
      </div>
      <% } %>
    </main>
    <%- include('../partials/footer.ejs') %>
  </body>
</html>
