// Customisations for the new Bulk Edit Products page only
// Scoped to containing div, because Turbo messes with body classes
@import "pages/unit_popout";

#products_v3_page {
  #content > .row:first-child > .container:first-child {
    // Allow table to extend to full width of available screen space
    // TODO: move this to a generic rule, eg body.full-width{}. Then it can be included on any page.
    //       or even better, create a switch that allows you to yield the page content without the surrounding content class. then you still have control to add the .content div where needed.
    max-width: none;
  }

  #products-content > .container:first-child {
    position: static;
  }

  #products-content .container {
    padding: 0;
  }

  .results {
    position: relative;
  }

  #products-form {
    .form-actions {
      .container {
        .status {
          flex-grow: 1; // Fill space
        }

        .form-buttons {
          flex-shrink: 0; // Don't shrink
        }
      }
    }
  }

  // Hopefully these rules will be moved to component(s).
  table.products {
    table-layout: fixed; // Column widths are based solely on col definitions (not content). This allows more efficient rendering.

    background-color: $color-tbl-bg;
    padding: 4px;
    padding-top: 0; // Hide border because .form-actions is there. It is added with th padding instead.
    border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows.

    // Additional horizontal padding to align with input contents
    thead {
      position: sticky;
      top: 0;
      z-index: 1; // TODO: Cover .popout and .vertical-ellipsis-menu, but only when sticky
      box-shadow: $box-shadow;

      // Form actions replaces other controls when active
      // It is part of the table header, to allow for sticky stacking when scrolling.
      .form-actions-wrapper {
        padding: 0;
        overflow: visible;
        background-color: white;
      }

      .form-actions-wrapper2 {
        position: relative;
        // Stretch to cover table side borders
        left: -4px;
        width: calc(100% + 8px);
        background-color: white;

        padding: 4px 0;
      }

      th.with-input {
        // Additional padding to line up with content of input
        padding-left: $padding-tbl-cell + $hpadding-txt;

        &.align-right {
          padding-right: $padding-tbl-cell + $hpadding-txt;
        }
      }
    }

    // Row hover
    tbody tr:hover {
      td {
        background-color: $light-grey;
        position: relative;

        // Left border
        &:first-child:before {
          content: "";
          position: absolute;
          top: 0;
          left: -4px;
          border-left: 4px solid $teal;
          height: 100%;
        }
      }

      // "Naked" inputs. Row hover helps reveal them.
      .naked_inputs {
        input:not([type="checkbox"]),
        .ts-control {
          background-color: $color-tbl-cell-bg;
        }
      }

      // Reveal naked button text when any part of row is hovered
      button.naked {
        color: $color-link;
      }
    }

    th,
    td {
      vertical-align: top;
      padding: $padding-tbl-cell;
      border: none;

      .content {
        // Plain content fields need help to align with text in inputs (due to vertical-align)
        margin: $vpadding-txt + 1px 0;

        @extend .line-clamp-1;
      }
    }

    th {
      padding-top: $padding-tbl-cell + 4px; // Increase padding to create a top border
      // Clip long content in headers, but allow wrapping
      overflow: hidden;
      text-overflow: clip; // If colums are so small that headers are clipping, ellipsis are more of a hindrance
    }

    td {
      position: relative; // Ensure that overflowing content is covered by the following cell. We don't use overflow: hidden because that messes with the popover.
      background-color: $color-tbl-cell-bg;
    }

    // "Relaxed" row groups, containing condensed rows.
    //
    // `display:table` enforces strict rules and won't allow border styles on tbody.
    // So we emulate group styles on the cells themselves.
    .relaxed {
      th,
      td {
        padding: $padding-tbl-cell-relaxed;
      }

      td {
        border-bottom: 2px solid $color-tbl-bg;

        &.with-image {
          padding: 4px 2px;
        }
      }

      tr:first-child td {
        border-top: 4px solid $color-tbl-bg;
      }

      tr:last-child td {
        border-bottom: 1px solid $color-tbl-cell-shadow;
      }
    }

    // "Condensed" rows
    .condensed {
      td,
      th {
        padding: $padding-tbl-cell-condensed;
      }
    }

    .field {
      padding: 0;
    }

    .fullwidth + .field {
      // Assume wrap, so add small gap
      margin-top: 3px;
    }

    .ts-control {
      z-index: 0; // Avoid hovering over thead
    }

    // Hide columns
    $columns:
      "image", "name", "sku", "unit_scale", "unit", "price", "on_hand", "producer", "category",
      "tax_category", "tags", "inherits_properties";

    @each $col in $columns {
      &.hide-#{$col} {
        .col-#{$col} {
          display: none;
        }
      }
    }
  }

  #no-products {
    margin-top: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: $h6-size;
    font-weight: 600;
    gap: 20px;
    margin-top: 116px;

    #no-products-actions {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
    }
  }

  #sort {
    margin-top: 3px; // Helps even up with .form-actions when visible
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &.disabled-section {
      display: none;
    }

    .pagination-description {
      flex-grow: 1; // Grow to fill space
      margin-right: 1em; // TODO: cleanup and use flex gap
    }

    .with-dropdown {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .per-page {
      width: 9em;
    }

    .column-preferences .ofn-drop-down-label {
      width: 13em;
    }
  }

  #filters {
    display: flex;
    column-gap: 20px;
    align-items: end;
    margin-bottom: 1rem;

    .query {
      flex-grow: 1;
      min-width: 15em;

      .search-input {
        position: relative;

        > input {
          padding-left: 33px;
          width: 100%;
        }

        &:before {
          position: absolute;
          font-family: FontAwesome;
          content: "\f002";
          color: $near-black;
          font-size: 16px;
          margin-top: 0.7rem;
          margin-left: 10px;
        }
      }
    }

    .producers,
    .categories {
      width: 15em;
    }

    .submit {
      text-align: right;

      .search-button {
        position: relative;

        > input {
          padding-left: 30px;
        }
      }
    }
  }

  // Blurred and non-clickable
  $disabled-blur: 1.5px;

  .disabled-section {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      backdrop-filter: blur($disabled-blur);
      // Stretch outside for a soft blur edge:
      left: -$disabled-blur;
      top: -$disabled-blur;
      bottom: -$disabled-blur;
      right: -$disabled-blur;
      z-index: 1; // Ensure tom-select is covered
    }
  }

  // Popout widget (todo: move to separate fiel)
  .popout {
    @include unit_popout;
  }

  a.image-field {
    position: relative;

    img {
      display: block;
      border-radius: $border-radius;
    }

    .button {
      display: none; // to be shown on hover
      position: absolute;
      bottom: 0;
      left: 0;
    }

    &:hover,
    &:focus {
      .button.secondary {
        display: block;
        background-color: $color-btn-secondary-hover-bg;
        color: $color-btn-hover-bg;
        border-color: $color-btn-hover-border;
      }
    }
  }

  @keyframes slideOutTop {
    from {
      transform: scaleY(1);
    }

    to {
      transform: scaleY(0);
    }
  }

  .slide-out {
    transform-origin: top;
    animation: slideOutTop 0.5s forwards;
  }

  @keyframes slideInTop {
    from {
      transform: scaleY(0);
    }

    to {
      transform: scaleY(1);
    }
  }

  .slide-in {
    transform-origin: top;
    animation: slideInTop 0.5s forwards;
  }
}
