<div class="view-content gin-layer-wrapper">
  <form class="inline-form" wire:submit.prevent>
    <select wire:model="monthYear" class="p-2">
      <option value="">{{ 'Select month and year'|t }}</option>
      {% for value, label in month_options %}
        <option value="{{ value }}">{{ label }}</option>
      {% endfor %}
    </select>
  </form>

  <table>
    <thead>
      <tr>
        <th>{{ 'Page URL'|t }}</th>
        <th>{{ 'Hits'|t }}</th>
        <th>{{ 'Visits'|t }}</th>
        <th>{{ 'Total Time Spent'|t }}</th>
        <th>{{ 'Bounce Rate'|t }}</th>
        <th>{{ 'Exit Rate'|t }}</th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
        <tr>
          <td><a href="{{ item.url }}" target="_blank">{{ item.label }}</a></td>
          <td>{{ item.hits }}</td>
          <td>{{ item.visits }}</td>
          <td>{{ item.sum_time_spent }}</td>
          <td>{{ item.bounce_rate }}</td>
          <td>{{ item.exit_rate }}</td>
        </tr>
      {% else %}
        <tr>
          <td colspan="6">{{ 'No data available'|t }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
