<div class="container mt-3">
  <div class="d-flex align-items-center flex-wrap mb-3">
    <div class="btn-group me-auto">
      <div class="btn btn-primary" mwlCalendarPreviousView [view]="'week'" [(viewDate)]="viewDate">Previous</div>
      <div class="btn btn-primary" mwlCalendarToday [(viewDate)]="viewDate" (click)="scrollToCurrentTime()">Today</div>
      <div class="btn btn-primary" mwlCalendarNextView [view]="'week'" [(viewDate)]="viewDate">Next</div>
    </div>
    <h3 class="mb-0 me-auto">{{ viewDate | calendarDate:('weekViewTitle') }}</h3>
    <div ngbDropdown class="d-inline-block me-2">
      <button type="button" class="btn btn-secondary" id="dropdown-segments" ngbDropdownToggle>
        Duration: {{ 60 / segments }} min
      </button>
      <div ngbDropdownMenu aria-labelledby="dropdown-segments">
        @for (segment of [12, 6, 4, 3, 2, 1]; track segment) {
          <button ngbDropdownItem (click)="segments = segment" [class]="segments === segment ? 'active bi-check-circle' : 'bi-circle'">
            {{ 60 / segment }} min
          </button>
        }
        <div class="dropdown-item-text text-muted">
          Choose how long each event should be by default.
        </div>
      </div>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-primary" routerLink="postpone">Postpone</button>
      <button type="button" class="btn btn-primary" routerLink="autofill">Autofill</button>
    </div>
  </div>
  <ng-template
    #weekViewHourSegmentTemplate
    let-segment="segment"
    let-locale="locale"
    let-segmentHeight="segmentHeight"
    let-isTimeLabel="isTimeLabel"
  >
    <div [class.disabled-hour]="segment.date < disabledBefore">
      <div
        #segmentElement
        class="cal-hour-segment"
        [style.height.px]="segmentHeight"
        [class.cal-hour-start]="segment.isStart"
        [class.cal-after-hour-start]="!segment.isStart"
        (mousedown)="startDragToCreate(segment, $event, segmentElement)"
      >
        @if (isTimeLabel) {
          <div class="cal-time">
            {{ segment.date | calendarDate:'weekViewHour':locale }}
          </div>
        }
      </div>
    </div>
  </ng-template>
  <div class="scroll-container border border-primary shadow mb-3">
    <mwl-calendar-week-view
      [viewDate]="viewDate"
      [events]="getEvents()"
      [hourSegmentTemplate]="weekViewHourSegmentTemplate"
      [weekStartsOn]="weekStartsOn"
      (dayHeaderClicked)="createAllDayEvent($event.day.date)"
      (eventTimesChanged)="eventTimesChanged($event)"
      [hourSegments]="segments"
      [eventSnapSize]="60 / segments"
      [eventTemplate]="eventTemplate"
    >
    </mwl-calendar-week-view>
  </div>
  <div class="d-flex justify-content-end">
    <a class="btn btn-outline-secondary ms-2" routerLink="..">
      Cancel
    </a>
    <button class="btn btn-primary ms-2" (click)="saveEvents()">
      @if (hasEvents()) {
        Update
      } @else {
        Create
      }
    </button>
  </div>
</div>

<ng-template
  #eventTemplate
  let-weekEvent="weekEvent"
  let-daysInWeek="daysInWeek"
>
  <div class="cal-event d-flex justify-content-between">
    <mwl-calendar-event-title
      [event]="weekEvent.tempEvent || weekEvent.event"
      [view]="daysInWeek === 1 ? 'day' : 'week'"
    ></mwl-calendar-event-title>
    @if (weekEvent.event.meta.note) {
      <i class="bi-sticky-fill text-light" placement="top" ngbTooltip="{{weekEvent.event.meta.note}}"></i>
    }
    <div class="click-cursor">
      <div ngbDropdown container="body" class="d-flex align-content-center">
        <button ngbDropdownToggle type="button" class="btn-no-style" id="dropdownButton"></button>
        <div ngbDropdownMenu>
          <button ngbDropdownItem (click)="openNoteModal(noteContent, weekEvent.event)">Add Note</button>
          <button ngbDropdownItem (click)="toggleAllDay(weekEvent.event)">
            {{ weekEvent.event.allDay ? 'Set time interval' : 'Set as full day' }}
          </button>
          <button ngbDropdownItem (click)="autofill(weekEvent.event)">Autofill</button>
          @if (weekEvent.event.meta.note) {
            <button ngbDropdownItem (click)="deleteNote(weekEvent.event)">Delete Note</button>
          }
        </div>
        <button class="btn-no-style bi-x-lg" (click)="deleteEvent(weekEvent.event)"></button>
      </div>
    </div>
  </div>
</ng-template>

<ng-template #noteContent let-modal>
  <div class="modal-header">
    <h4 class="modal-title">Add a note</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')"></button>
  </div>
  <div class="modal-body">
    <textarea class="form-control"
              type="text"
              [(ngModel)]="note"
              placeholder="You can add a note for this specific event here."
              rows="3"
    ></textarea>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-secondary" (click)="modal.close('Close click')">Close</button>
    <button type="button" class="btn btn-primary" (click)="addNote()">Save</button>
  </div>
</ng-template>
<router-outlet></router-outlet>
