<!DOCTYPE html>
<html lang="es">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alerta de Propiedades - Lliria Properties</title>
<style>
body { font-family: Arial, sans-serif; background: #f5f5f5; margin: 0; padding: 0; }
.container { max-width: 600px; margin: 30px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 20px rgba(0,0,0,.1); overflow: hidden; }
.header { background: linear-gradient(135deg, #0d6efd, #0a58ca); color: #fff; padding: 30px; text-align: center; }
.header h1 { margin: 0; font-size: 24px; }
.content { padding: 25px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #0d6efd; color: #fff; padding: 10px 8px; text-align: left; }
td { padding: 9px 8px; border-bottom: 1px solid #eee; }
tr:hover td { background: #f8f9fa; }
.price { color: #0d6efd; font-weight: bold; }
.footer { background: #f8f9fa; padding: 15px; text-align: center; font-size: 11px; color: #888; }
a { color: #0d6efd; }
</style>
</head>
<body>
<div class="container">
  <div class="header">
    <h1>🏠 Nuevas Propiedades en Lliria</h1>
    <p style="margin:8px 0 0;opacity:.85"><%= properties.length %> propiedades encontradas según tus filtros</p>
  </div>
  <div class="content">
    <table>
      <thead>
        <tr><th>Propiedad</th><th>Precio</th><th>Municipio</th><th>Tipo</th><th>Portal</th></tr>
      </thead>
      <tbody>
        <% properties.forEach(function(p) { %>
        <tr>
          <td><a href="<%= p.url %>" target="_blank"><%= p.title.substring(0, 60) %></a><br>
          <small><%= p.rooms ? p.rooms + " hab." : "" %> <%= p.size_m2 ? "· " + p.size_m2 + " m²" : "" %></small></td>
          <td class="price"><%= Number(p.price).toLocaleString("es-ES") %> €</td>
          <td><%= p.municipality || p.location %></td>
          <td><%= p.property_type %></td>
          <td><%= p.source %></td>
        </tr>
        <% }); %>
      </tbody>
    </table>
  </div>
  <div class="footer">
    Lliria Properties Scraper &bull; Alerta automática &bull; <a href="#">Dejar de recibir alertas</a>
  </div>
</div>
</body>
</html>
