<%- include('partials/head') %>

<body>
  <%- include("partials/navBar") %>
      <nav class="navbar bg-body-tertiary" style="padding: 30px">
        <div class="container-fluid">
          <!-- <a class="navbar-brand"><%= miTitulo %></a> -->

          <a type="button" class="btn btn-success" href="/crearPosteo">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="25" height="25" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
              <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" />
              <path d="M9 12h6" />
              <path d="M12 9v6" />
            </svg>    Nuevo posteo
          </a>

          <!-- <form class="d-flex" role="search">
            <a type="button" class="btn btn-dark" href="/">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-home-2" width="25" height="25" viewBox="0 0 24 24" stroke-width="2" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
                <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
                <path d="M10 12h4v4h-4z" />
              </svg>
            </a>
          </form> -->
        </div>
      </nav>

      <table class="table table-striped">
        <thead>
          <tr>            
            
            <!-- <th scope="col">Id</th> -->
            <th scope="col">T√çTULO</th>
            <th scope="col">CONTENIDO</th>
            <th scope="col">IMAGEN</th>
            <th scope="col"></th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>          
            <% resultados.forEach((item) => { %>
            <tr>
              <!-- <th scope="row"><%= item.id %></th>     muestra el ID en la tabla -->
              <td><%= item.titulo %></td>
              <td><%= item.contenido %></td>
              
              <% if(item.imagen){ %>   <!-- link a la imagen subida -->
                  <td><a class="link-opacity-25-hover" href="<%= item.imagen %>">
                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24"                            
                            <circle cx="7.499" cy="9.5" r="1.5"></circle>
                            <path d="m10.499 14-1.5-2-3 4h12l-4.5-6z"></path>
                            <path d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-16 14V6h16l.002 12H3.999z"
                            ></path>
                        </svg>
                  </a></td>
              <% } else{ %>  
                  <td><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-photo-x" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                    <path d="M15 8h.01" />
                    <path d="M13 21h-7a3 3 0 0 1 -3 -3v-12a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v7" />
                    <path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l3 3" />
                    <path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0" />
                    <path d="M22 22l-5 -5" />
                    <path d="M17 22l5 -5" />
                  </svg></td>
              <% } %>

                         <td>
                          <a href="/editarPosteo/<%= item.id %>" class="btn btn-warning">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-pencil" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <path d="M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4" />
                        <path d="M13.5 6.5l4 4" />
                      </svg>
                    </a>
              </td>
              <td>
                <a href="/borrarPosteo/<%= item.id %>" class="btn btn-danger" >
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M4 7l16 0" />
                  <path d="M10 11l0 6" />
                  <path d="M14 11l0 6" />
                  <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
                  <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" />
                </svg>
              </a>
              </td>
            </tr>
          <% }) %>
        </tbody>   
      </table>
      <%- include("partials/footer")%>
</body> 
</html> 