@use "lib/viewport";

.admin-plugins.automation {
  .automations {
    .relative-date {
      font-size: var(--font-down-1);
    }

    &__stats {
      font-size: var(--font-down-1);
    }

    td[role="button"] {
      cursor: pointer;
    }

    &__name {
      word-break: break-word;
    }
  }

  .discourse-automations-table {
    margin-top: 1em;
  }

  .d-admin-table.automations {
    .d-admin-row__content {
      @include viewport.until(md) {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
      }
    }

    .d-admin-row__name {
      @include viewport.until(md) {
        order: 1;
      }
    }

    .d-admin-row__detail.automations__runs {
      @include viewport.until(md) {
        order: 2; // move below the name to avoid empty spacing
      }
    }

    .d-admin-row__detail.automations__updated-by {
      @include viewport.until(md) {
        order: 3;
      }
    }

    .d-admin-row__detail.automations__enabled {
      @include viewport.until(md) {
        order: 5;
      }
    }

    .d-admin-row__controls.automations__controls {
      text-align: right;
      display: flex;
      flex-direction: row;
      gap: 0.5em;
      justify-content: flex-end;

      @include viewport.until(md) {
        order: 6;
      }
    }
  }

  .admin-section-landing__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    h2 {
      margin: 0 auto 0 0;
    }

    &-filter {
      margin: 0;
      flex: 0 1 15em;
    }
  }

  .admin-section-landing__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
    gap: 1em 2em;
    margin-top: 1em;
    border-top: 3px solid var(--primary-low); // matches tbody border
    padding-top: 1em;
  }

  .admin-section-landing-item {
    cursor: pointer;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0;

    &__buttons {
      display: none; // empty container
    }

    &__description {
      max-width: 18.75em;
    }
  }
}

.discourse-automation-title {
  display: flex;
  align-items: center;
  height: 40px;

  .title {
    margin: 0 0 0 0.5em;
    font-weight: 700;
    font-size: $font-up-3;
  }

  .new-automation {
    margin-left: auto;
  }
}

.enabled-automation {
  color: var(--success);
}

.disabled-automation {
  color: var(--danger);
}

.discourse-automation-form {
  .automation-enabled-card {
    margin-bottom: 1em;
  }

  .enabled-toggle-with-tooltip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .scriptables,
  .triggerables {
    .select-kit-body {
      max-height: 250px;
    }
  }

  .alert-info {
    margin-top: 1em;
  }

  .alert {
    padding: 1em;

    p {
      margin: 0;
    }
  }

  .form-horizontal {
    .control-label {
      margin: 0.25em 0.25em 0.25em 0;
      text-align: left;
      width: 180px;
      line-height: 27px;
    }

    .controls {
      margin-left: 185px;
    }

    .boolean-field {
      .controls {
        display: flex;
      }
    }
  }

  .automation-presentation {
    border-left: 5px solid var(--primary-very-low);
    padding: 0.5em;

    .automation-name {
      font-size: $font-up-2;
    }

    .automation-doc {
      margin: 0;
    }
  }

  .automation-presentation + .control-group {
    margin-top: 2em;
  }

  .scripts-list {
    width: 210px;

    .select-kit-header {
      background: var(--secondary);
      border: 1px solid var(--primary-medium);
      border-radius: 0;

      &:hover {
        color: var(--primary);
      }
    }
  }

  .script-doc {
    background: var(--primary-very-low);
    border-left: 3px solid var(--primary-low);
  }

  .form-section {
    .title {
      padding-bottom: 0.5em;
      margin-bottom: 1em;
      border-bottom: 1px solid var(--content-border-color);
    }

    .input-large,
    .select-kit,
    .d-date-time-input {
      width: 300px;

      .select-kit,
      input[type="text"] {
        width: auto;
      }
    }

    .period-field {
      line-height: 34px;

      .controls {
        display: flex;
      }

      .select-kit {
        width: 150px;
        margin-left: 6px;

        .select-kit-header {
          height: 34px;
        }
      }

      input {
        width: 100px;
        max-height: 34px;
        margin: 0 0 0 6px;
      }
    }

    .d-date-time-input {
      border-color: var(--primary-medium);
    }
  }

  .control-group {
    .control-description {
      color: var(--primary-medium);
      width: 100%;
      margin: 0;
      padding: 0.25em 0;
    }

    &.automation-enabled {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 1em;

      label {
        margin: 0;
      }

      .ember-checkbox {
        margin: 0 0 0 1em;
        padding: 0;
      }

      .control-label.disabled {
        color: var(--danger);
      }
    }
  }

  .controls-row {
    display: flex;

    input {
      margin-bottom: 0;
    }
  }

  .field-wrapper {
    display: flex;
    flex-direction: column;
  }

  .text-field {
    .ember-text-field {
      width: 300px;
    }
  }

  .message-field {
    textarea {
      width: 300px;
      height: 200px;
    }
  }

  .next-trigger {
    padding: 1em;

    p {
      margin: 0;
      padding: 0 0 0.5em 0;
    }
  }

  .pms-field {
    .actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      &.header {
        justify-content: space-between;
        margin: 1em 0;
      }
    }

    .pm-field {
      margin-bottom: 1em;

      .control-group {
        display: flex;
        flex-direction: column;

        .control-label {
          width: 100%;
        }

        .controls {
          margin: 0;
        }
      }

      .d-editor,
      .d-editor-container {
        display: flex;
        flex: 1;
        justify-content: space-between;

        .d-editor-input {
          min-height: 200px;
        }
      }
    }

    .d-editor-textarea-wrapper {
      box-sizing: border-box;
      min-width: 300px;
    }

    .pm-field:not(:last-child) {
      margin-bottom: 1em;
    }

    .pm-title {
      width: 100%;
    }

    .pm-textarea {
      width: 100%;
      box-sizing: border-box;
      height: 200px;
    }

    .no-pm {
      border: 1px solid var(--tertiary);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1em;
      margin: 1em 0;
      flex-direction: column;
    }
  }
}

.placeholders-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .placeholder-item {
    border-radius: 3px;
    font-size: $font-down-2;
    margin: 0.5em 0.5em 0 0;
  }
}

details[open] > summary:first-of-type ~ .btn-checked,
details.open > summary:first-of-type ~ .btn-checked {
  display: inline-flex;
}
