@props([
  'title',
  'subtitle' => '',
])

<div class="reports-header">
  <div class="reports-header__intro">
    <h1 class="page-title">{{ $title }}</h1>
    @if ($subtitle !== '')
      <p class="page-subtitle">{{ $subtitle }}</p>
    @endif
  </div>
  <div class="reports-header__tools">
    <div class="reports-header__actions no-print">
      <div class="dropdown">
        <button
          type="button"
          class="btn btn-outline-secondary btn-sm dropdown-toggle"
          data-bs-toggle="dropdown"
          aria-expanded="false"
          aria-label="Export report"
        >
          <i class="bi bi-download" aria-hidden="true"></i>
          <span>Export</span>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li>
            <button type="button" class="dropdown-item" data-report-export="excel">
              <i class="bi bi-file-earmark-excel" aria-hidden="true"></i> Excel
            </button>
          </li>
          <li>
            <button type="button" class="dropdown-item" data-report-export="pdf">
              <i class="bi bi-file-earmark-pdf" aria-hidden="true"></i> PDF
            </button>
          </li>
          <li>
            <button type="button" class="dropdown-item" data-report-export="csv">
              <i class="bi bi-filetype-csv" aria-hidden="true"></i> CSV
            </button>
          </li>
        </ul>
      </div>
      <button type="button" class="btn btn-outline-secondary btn-sm" data-report-export="print" title="Print report">
        <i class="bi bi-printer" aria-hidden="true"></i>
        <span class="d-none d-sm-inline"> Print</span>
      </button>
    </div>
    <div class="reports-header__filter">
      <x-date-range-filter
        :action="request()->url()"
        :date-from="$dateFrom"
        :date-to="$dateTo"
        :filter-month="$filterMonth"
      />
    </div>
  </div>
</div>

@once
  @push('scripts')
    <script src="{{ asset('assets/js/pages/reports-export.js') }}"></script>
  @endpush
@endonce