// SPDX-FileCopyrightText: 2023 Icinga GmbH <https://icinga.com>
// SPDX-License-Identifier: GPL-3.0-or-later

/* Layout */

.calendar-controls {
  display: flex;
  justify-content: flex-start;
  max-width: none;

  > :not(:nth-last-child(-n+2)),
  > .icinga-controls > :not(:last-child) {
    margin-right: .5em;
  }

  > :nth-child(3n+4):not(:last-child):not(:nth-last-child(2)) {
    margin-right: 1em;
  }

  .view-mode-switcher {
    margin-left: auto;
    margin-bottom: 0;

    label {
      min-width: 6em;
      text-align: center;
    }
  }
}

/**
 * Basic rules for a time grid
 *
 * Required variables:
 * - --primaryColumns: Number of primary columns
 * - --primaryRows: Number of primary rows
 * - --columnsPerStep: Number of columns per step
 * - --rowsPerStep: Number of rows per step
 */
.time-grid {
  --sidebarWidth: 4em;
  --headerHeight: 1.5em;
  --minimumPrimaryColumnWidth: 2em;
  --minimumStepColumnWidth: ~"calc(var(--minimumPrimaryColumnWidth) / var(--columnsPerStep))";
  --primaryRowHeight: 1fr;
  --stepRowHeight: 1fr;

  .time-grid-header {
    display: grid;
    align-items: flex-end;
    border-left: 1px solid transparent;
    grid-template-columns: var(--sidebarWidth) repeat(var(--primaryColumns), minmax(var(--minimumPrimaryColumnWidth), 1fr));

    .column-title {
      border-right: 1px solid transparent;
    }
  }

  .sidebar {
    display: grid;
    border-top: 1px solid transparent;
    grid-template-rows: repeat(var(--primaryRows), var(--primaryRowHeight));

    .row-title {
      text-align: right;
      padding-right: .5em;
      border-bottom: 1px solid transparent;

      .hour,
      .week-no {
        display: block;
      }

      .hour {
        font-size: .857em;
        margin-top: ~"calc(-.75em - 1px)"; // -(Desired offset + border-width)
      }
    }
  }

  .grid:after {
    // Icinga Web has a rule that defines this. This disables it to make both grids overlay each other perfectly
    content: none;
  }

  .grid,
  .overlay {
    display: grid;
    overflow: hidden;
    grid-template-rows: repeat(~"calc(var(--primaryRows) * var(--rowsPerStep))", var(--stepRowHeight));
    grid-template-columns: repeat(~"calc(var(--primaryColumns) * var(--columnsPerStep))", minmax(var(--minimumStepColumnWidth), 1fr));
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-color: transparent;

    .entry {
      // TODO: This lets all entries have a margin, even those that don't overlap a step's border (multiple entries in the same step)
      //       Should depend on a class which indicates that it overlaps a step's border (the grid should be able to calculate this)
      margin: 0 1px 1px 0;
    }
  }

  .step {
    position: relative;
    grid-row-end: span var(--rowsPerStep);
    grid-column-end: span var(--columnsPerStep);
    border-width: 1px 1px 0 0;
    border-style: solid;
    border-color: transparent;
  }

  .step,
  .entry {
    > a {
      display: block;
      overflow: hidden;

      &:first-of-type {
        height: 100%;
      }
    }
  }

  .overlay {
    position: relative;
  }

  .extra-count {
    z-index: 99;
    position: absolute;
    bottom: 1px; // 1px is the border-width of an entry, this makes it so it doesn't overlap
    right: 1px;
  }

  .entry {
    overflow: hidden;

    .content {
      display: flex;
      flex-wrap: wrap;
      column-gap: .5em;
      padding: .125em;
      height: 100%;
      max-height: 100%;
    }

    .title {
      display: flex;
      flex-wrap: wrap;
      flex: 0 1 auto;
      column-gap: .5em;
      overflow: hidden;

      time {
        margin-right: .5em;
      }

      .attendee {
        word-break: break-word;
      }

      .attendee .icon {
        vertical-align: baseline;
      }
    }

    .description {
      flex: 1 1 auto;
      overflow: hidden;

      p {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        .line-clamp(3);
      }
    }

    .ends-at {
      align-self: flex-end;
      text-align: right;
      width: 100%;

      .text-ellipsis();
      font-size: 11/12em;
      line-height: 12/11 * 1.5;
    }
  }
}

.calendar.month .time-grid {
  --primaryColumns: 7; // days
  --primaryRows: 6; // weeks
  --columnsPerStep: 48; // 24 hours
  --rowsPerStep: 5;

  .step > a {
    text-align: right;
    &:first-of-type {
      padding-right: .25em;
    }
  }
}

.calendar.week .time-grid {
  --primaryColumns: 7; // days
  --primaryRows: 24; // hours
  --columnsPerStep: 4;
  --rowsPerStep: 2;
  --sidebarWidth: 6em;
  --headerHeight: 2.5em;

  .grid,
  .overlay {
    border-left-color: transparent;
  }
}

.calendar.day .time-grid {
  --primaryColumns: 1; // days
  --primaryRows: 24; // hours
  --columnsPerStep: 28;
  --rowsPerStep: 2;
  --sidebarWidth: 6em;
  --headerHeight: 2.5em;

  .grid,
  .overlay {
    border-left-color: transparent;
  }
}

.time-grid {
  display: grid;
  grid-template-columns: var(--sidebarWidth) minmax(0, 1fr);
  grid-template-rows: var(--headerHeight) var(--headerHeight) minmax(0, 1fr);

  .time-grid-header {
    grid-area: ~"1 / 1 / 3 / 3";
  }

  .sidebar {
    grid-area: ~"3 / 1 / 4 / 2";
  }

  .grid,
  .overlay {
    grid-area: ~"3 / 2 / 4 / 3";
  }

  .overlay {
    pointer-events: none;

    .entry {
      pointer-events: all;
    }
  }
}

/* Design */

.calendar-controls {
  .view-mode-switcher label {
    padding: .5em;
    line-height: normal;
  }
}

.calendar {
  .calendar-title {
    font-size: 1.5em;
    font-weight: normal;
  }
}

.time-grid-header .column-title {
  text-align: center;
  .day-name {
    color: @text-color-light;
    text-transform: uppercase;
  }

  position: relative;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -1px;
    right: -1px;
    display: block;
    height: 1px;
    .box-shadow(0, 1px, 0, 0, @gray-lighter);
  }
}

.time-grid {
  &.horizontal-flow {
    .entry {
      &.two-way-gradient {
        border-radius: 0;
        border-right: none;
        border-left: none;
        background: linear-gradient(to right, transparent, var(--entry-bg) 0.5em, var(--entry-bg) ~"calc(100% - 0.5em)", transparent);
      }

      &.opening-gradient {
        border-radius: 0 0.25em 0.25em 0;
        border-left: none;
        background: linear-gradient(to left, var(--entry-bg) ~"calc(100% - 1em)", transparent);
      }

      &.ending-gradient {
        border-radius: 0.25em 0 0 0.25em;
        border-right: none;
        background: linear-gradient(to right, var(--entry-bg) ~"calc(100% - 1em)", transparent);
      }
    }
  }

  &.vertical-flow {
    .entry {
      &.two-way-gradient {
        border-radius: 0;
        border-top: none;
        border-bottom: none;
        background: linear-gradient(to bottom, transparent, var(--entry-bg) 0.5em, var(--entry-bg) ~"calc(100% - 0.5em)", transparent);
      }

      &.opening-gradient {
        border-radius: 0 0 0.25em 0.25em;
        border-top: none;
        background: linear-gradient(to top, var(--entry-bg) ~"calc(100% - 1em)", transparent);
      }

      &.ending-gradient {
        border-radius: 0.25em 0.25em 0 0;
        border-bottom: none;
        background: linear-gradient(to bottom, var(--entry-bg) ~"calc(100% - 1em)", transparent);
      }
    }
  }

  .grid {
    border-color: @gray-lighter;
  }

  .step {
    border-color: @gray-lighter;
    color: @text-color-light;
  }

  &:has(.time-grid-header) .step[data-y-position="0"] {
    border-top-color: transparent;
  }

  .step,
  .entry {
    > a {
      text-decoration: none;
    }
  }

  .entry {
    border: 1px solid var(--entry-border-color);
    background-color: var(--entry-bg);
    .rounded-corners();

    a:hover {
      opacity: .6;
    }

    .title {
      font-weight: bold;
      color: @text-color;
      opacity: .75;

      time {
        font-weight: normal;
      }

      .attendee .icon {
        font-size: .75em;
        opacity: .8;
      }
    }

    .ends-at {
      color: @text-color-light;
    }
  }

  .column-title {
    .day-number {
      font-weight: bold;
      font-size: 1.5em;
    }
  }

  .row-title {
    color: @text-color-light;
  }
}
