<!-- Semmet Angular: Offcanvas — https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> triggerLabel="Open filters" title="Filters">
  <app-filter-panel />
</<%= selector %>>
-->
<button
  type="button"
  class="<%= dasherize(name) %>__trigger"
  [attr.aria-controls]="instanceId + '-panel'"
  [attr.aria-expanded]="isOpen()"
  (click)="open($event)"
>
  {{ triggerLabel() }}
</button>

@if (isOpen()) {
  @if (backdrop()) {
    <div class="<%= dasherize(name) %>__backdrop" (click)="handleBackdropClick()"></div>
  }
  <section
    #panel
    tabindex="-1"
    role="dialog"
    aria-modal="true"
    [id]="instanceId + '-panel'"
    [class]="panelClasses()"
    [attr.aria-labelledby]="instanceId + '-title'"
    [attr.aria-describedby]="description() ? instanceId + '-description' : null"
    (keydown)="handlePanelKeydown($event)"
  >
    <header class="<%= dasherize(name) %>__header">
      <div>
        <h2 class="<%= dasherize(name) %>__title" [id]="instanceId + '-title'">{{ title() }}</h2>
        @if (description()) {
          <p class="<%= dasherize(name) %>__description" [id]="instanceId + '-description'">
            {{ description() }}
          </p>
        }
      </div>
      <button
        type="button"
        class="<%= dasherize(name) %>__close"
        [attr.aria-label]="closeLabel()"
        (click)="close()"
      >
        <span aria-hidden="true"></span>
      </button>
    </header>
    <div class="<%= dasherize(name) %>__body">
      <ng-content></ng-content>
      <p class="<%= dasherize(name) %>__placeholder">
        Substitua isto por filtros, navegação ou controles contextuais.
      </p>
    </div>
  </section>
}
