{% extends "_base.html" %} {% block title %}Contact Submissions{% endblock %} {%
block heading %}Contact Form Submissions{% endblock %} {% block extra_styles %}
<link rel="stylesheet" href="/static/css/admin.css" />
<style>
  .filters {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
  }
  .filters form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: end;
  }
</style>
{% endblock %} {% block content %}
<div id="message"></div>

<div class="filters">
  <form id="filterForm">
    <div>
      <label for="email">Email Filter:</label>
      <input
        type="text"
        id="email"
        name="email"
        placeholder="Filter by email"
      />
    </div>
    <div>
      <label for="date_from">Date From:</label>
      <input type="date" id="date_from" name="date_from" />
    </div>
    <div>
      <label for="date_to">Date To:</label>
      <input type="date" id="date_to" name="date_to" />
    </div>
    <div>
      <label for="per_page">Items per page:</label>
      <select id="per_page" name="per_page">
        <option value="25">25</option>
        <option value="50" selected>50</option>
        <option value="100">100</option>
      </select>
    </div>
    <button type="submit">Apply Filters</button>
    <button type="button" class="clear-btn" onclick="clearFilters()">
      Clear
    </button>
  </form>
</div>

<div id="loading" class="loading" style="display: none">Loading...</div>

<table id="submissionsTable">
  <thead>
    <tr>
      <th data-sort="id">ID</th>
      <th data-sort="name">Name</th>
      <th data-sort="email">Email</th>
      <th data-sort="company">Company</th>
      <th>Message</th>
      <th data-sort="created_at">Date</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody id="submissionsBody">
    <tr>
      <td colspan="7" class="no-data">Loading submissions...</td>
    </tr>
  </tbody>
</table>

<div class="pagination" id="pagination"></div>

{% endblock %} {% block extra_scripts %}
<script src="/static/js/admin.js"></script>
{% endblock %}