@use "../../../010-settings/" as *;
@use "../../../030-tools/_tool_buttons" as *;
@use "../../../030-tools/_tool_browser-prefixes" as *;
@use "../../../050-layout/basics" as *;
@use "../../../050-layout/standardpage/layout_standardpage" as spage;
@use "../../../050-layout/layout_grid" as l-grid;
@use "../../../030-tools/tool_highlighted-box" as box;
@use "../../../050-layout/layout_breakpoints" as brk;

$table-border-color: $il-main-border-color;

//** Presentation Table borders
$il-table-presentation-rowborder-top: 1px solid $table-border-color;

//** Presentation Table colum widths
$il-table-presentation-rowcontrol-colwidth: 5%;
$il-table-presentation-contents-colwidth: 95%;

$il-table-presentation-details-viewcontrols-bg-color: $il-highlight-bg;
$il-table-presentation-details-viewcontrols-btn-color: $il-main-color;
$il-table-presentation-details-viewcontrols-btn-bg: white;

.il-table-presentation-viewcontrols {
    margin-bottom: $il-margin-large-vertical;
    @media print {
        display: none !important;
    }
}

.il-table-presentation-row {
    background-color: $il-main-bg;
    border-top: $il-table-presentation-rowborder-top;
    padding-top: $il-padding-xxlarge-vertical;
    padding-bottom: $il-padding-xxlarge-vertical;
    position: relative;
    white-space: nowrap;

    &.expanded {
        .il-table-presentation-row-controls {
            width: auto;
        }
        .il-table-presentation-row-expanded,
        .il-table-presentation-row-controls-collapser {
            display: block;
        }
        .il-table-presentation-row-header-fields,
        .il-table-presentation-row-controls-expander {
            display: none;
        }
    }
    &.collapsed {
        .il-table-presentation-row-controls {
            width: auto;
        }
        .il-table-presentation-row-expanded,
        .il-table-presentation-row-controls-collapser {
            display: none;
        }
        .il-table-presentation-row-header-fields,
        .il-table-presentation-row-controls-expander {
            display: block;
        }
    }

    .il-table-presentation-row-contents {
        white-space: normal;
        width: auto;
    }

    .il-table-presentation-row-header {
        // if there is no sub headline, a min-height is needed so further fields box doesn't overlap with action button - Mantis 36531
        min-height: $il-font-size-large * 2;
        h4 {
            font-size: $il-font-size-large;
            font-weight: $il-font-weight-base;
            padding: 0;
            margin-top: 0;
            cursor: pointer;
        }

        @include brk.on-screen-size('small') {
            order: 1;
        }
    }

    .il-table-presentation-actions {
        @include brk.on-screen-size('small') {
            order: 3;
            margin-top: $il-margin-xxlarge-vertical;
        }
    }

    // add : to both importantfields and desclist keys
    .il-table-presentation-row-header-fields-label::after,
    .il-table-presentation-desclist .il-listing-characteristic-value-label::after {
        content: ":\00a0";
    }

    .il-table-presentation-row-expanded {
        margin-top: 0;

        @include brk.on-screen-size('small') {
            order: 2;
        }

        .il-table-presentation-details {
            .il-table-presentation-actions {
                margin-bottom: $il-margin-large-vertical;
            }

            .il-table-presentation-fields {
                @include box.highlighted-box();
                min-height: 20px;
                font-size: $il-font-size-small;
                .il-item-property-name {
                    color: $il-text-light-color;
                }
            }
        }
    }
}

//
// DATA TABLE
// ==========
//

$table-ordering__inset-row__shadow: inset 0px 0px 14px 2px #00000063;

//
// Basic Table Design
//

.c-table-data,
.c-table-ordering {
    .viewcontrols {
        margin-bottom: $il-margin-large-vertical;
    }
}

.c-table-data__table {
    background-color: $il-main-bg;
    &-wrapper {
        box-shadow: none;
    }
}

.c-table-data__cell {
    background-color: $il-main-bg; // so sticky cells can cover up cells underneath them
    padding: $il-padding-large-vertical $il-padding-large-horizontal;
    border: 1px solid $il-main-border-color;
    &--multiaction {
        padding-bottom: $il-padding-large-vertical;
    }
}

// hover row on larger screens only
.c-table-ordering:not(.dragInProgress) .c-table-data__row:hover td.c-table-data__cell,
.c-table-data .c-table-data__row:hover td.c-table-data__cell {
    @include brk.on-screen-size(medium) {
        background-color: $il-main-darker-bg;
    }
}

.c-table-data__selection_none {
    display: none;
}

//
// Table Header
//

th.c-table-data__cell {
    padding: 0; // most of the header cells get padding from the resize wrapper
    // sticky header on large screens
    @include brk.on-screen-size(medium) {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;
        &.c-table-data__header__rowselection {
            padding: $il-padding-xxlarge-vertical $il-padding-large-horizontal;
            text-align: center;
            // row selection also sticks to the left
            position: sticky;
            left: -2px; // so text doesn't glitch through on left edge
            z-index: 4;
            // gradient to fade row selection into header text
            background: rgb(255,255,255);
            background: linear-gradient(90deg, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%);
        }
        &.c-table-data__header__rowaction {
            padding: $il-padding-xxlarge-vertical $il-padding-large-horizontal;
        }
    }
}

// stick under breadcrumbs when they are present

.breadcrumbs + #mainspacekeeper th.c-table-data__cell {
    @include brk.on-screen-size(large) {
        top: spage.$il-standard-page-breadcrumbs-height - 1px;
    }

}

// shadow below header when sticky (because borders and box shadow are left behind in tables)
th.c-table-data__cell:after {
    @include brk.on-screen-size(medium) {
        position: absolute;
        content: "";
        left: 0;
        bottom: -5px;
        width: 100%;
        height: 5px;
        background: linear-gradient(180deg, #00000021, transparent);
        z-index: 3;
    }
}

// Resizable Header Cell
.c-table-data__header__resize-wrapper {
    padding: $il-padding-xxlarge-vertical $il-padding-large-horizontal;
    height: 100%;
    margin: 0px;
    display: block;
    vertical-align: bottom;
    // limit max-height
    max-height: 85px;
    overflow: hidden;
    //indicate when text is being cut off
    &:after {
        content: "";
        bottom: 0;
        left: 0;
        display: block;
        position: absolute;
        height: $il-padding-xxlarge-vertical * 1.5;
        width: calc(100% - 10px);
        background: linear-gradient(360deg, white, transparent);
        pointer-events: none;
    }
    // actual resize attribute is later added for specific column types only
}

//
// Row Selection & Multiaction
//

.c-table-data__rowselection {
    min-width: 50px; // to align checkboxes with multiaction
    text-align: center;
    vertical-align: middle;
    // drag handler for ordering table
    .glyphicon-dragHandle::before {
        font-size: 18px;
        color: $il-main-border-color;
    }
}

// shadow that sticks to the right of action column (because borders and box shadow are left behind and do not stick)
.c-table-data__rowselection:after {
    @include brk.on-screen-size(medium) {
        position: absolute;
        content: "";
        top: 0;
        right: -5px;
        height: 100%;
        width: 5px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.1294117647), transparent);
    }
}

//
// Column rowselection
//

.c-table-data__rowselection,
.c-table-data__multiaction-triggerer {
    position: -webkit-sticky;
    position: sticky;
    left: -1px; // so text doesn't glitch through on left edge
}

.c-table-data__positioninput {
    .c-input[data-il-ui-component] {
        grid-template-columns: 0% 100%;
        > label {
            display:none;
        }
        input {
            width : 65px;
        }
    }
}

//
// Multiaction Dropdown below table
//

.c-table-data__multiaction-triggerer {
    width: fit-content;
}

//
// Special Column Types
//

// Text
.c-table-data__cell--link,
.c-table-data__cell--linklisting,
.c-table-data__cell--text {
    .c-table-data__header__resize-wrapper {
        min-width: 140px;
        resize: horizontal;
    }
}

// E-Mail
.c-table-data__cell--email {
    .c-table-data__header__resize-wrapper {
        min-width: 200px;
        resize: horizontal;
    }
}
td.c-table-data__cell--email {
    text-align: right;
}

// Number
.c-table-data__cell--number,
.c-table-data__cell--status {
    .c-table-data__header__resize-wrapper {
        width: 110px; // width instead of min-width so resizer can also reduce width below default
        resize: horizontal;
    }
}
td.c-table-data__cell--number {
    text-align: right;
}

// Date
.c-table-data__cell--date {
    .c-table-data__header__resize-wrapper {
        // width: 110px;
        min-width: 110px;
        resize: horizontal;
    }
}

// Status Icon
.c-table-data__cell--statusicon,
.c-table-data__cell--boolean {
    .c-table-data__header__resize-wrapper {
        // width: 40px;
        min-width: 40px;
        resize: horizontal;
    }
}

// Highlighted Columns
td.c-table-data__cell--highlighted {
    background-color: $il-main-dark-bg;
}
// hover on larger screens only
.c-table-data .c-table-data__row:hover td.c-table-data__cell--highlighted,
.c-table-ordering:not(.dragInProgress) .c-table-data__row:hover td.c-table-data__cell--highlighted {
    @include brk.on-screen-size(medium) {
        background-color: darken($il-main-darker-bg, 7%);
    }
}

// Breadcrumb
.c-table-data__cell--breadcrumb .breadcrumb_wrapper {
    background-color: transparent;
    .breadcrumb {
        white-space: wrap;
        padding: 0;
    }
}

//
// Data Table on Small Screens
//

// Fake Header Title repeated inside the cell, invisible by default
.c-table-data__cell__col-title {
    display: none;
}

.c-table-data,
.c-table-ordering {
    @include brk.on-screen-size(small) {
        //
        // Basic Table Design
        //

        .c-table-data__table,
        tbody,
        .c-table-data__cell {
            width: 100%;
            display: block;
            border: none;
        }
        tr.c-table-data__row {
            // using flex so we can pull row action to the top with flex order
            display: flex;
            flex-wrap: wrap;
        }

        // border and padding before/after every entry
        tr.c-table-data__row {
            border-top: 1px solid $il-main-border-color;
            padding: $il-margin-xxxlarge-vertical 0 $il-margin-xxxlarge-vertical;
        }
        .c-table-data__table {
            border-bottom: 1px solid $il-main-border-color;
        }



        //
        // Table Header
        //

        thead {
            display: none;
        }
        // Fake Header Title in Cells
        .c-table-data__cell__col-title {
            display: inline;
            font-weight: bold;
        }

        //
        // Column Specific Styling (some resets to get a card look)
        //

        td.c-table-data__cell--email,
        td.c-table-data__cell--number {
            text-align: inherit;
        }

        // Highlighted Columns
        td.c-table-data__cell--highlighted {
            font-size: $il-font-size-xxlarge;
            background-color: inherit;
        }

        .c-table-data__positioninput {
            .c-input[data-il-ui-component] {
                display: flex;
                align-items: center;
                > label {
                    display: block;
                    width: auto;
                }
                input {
                    width : 65px;
                }
            }
        }

        //
        // Row Selection & Multiaction (pull to top)
        //
        .c-table-data__rowselection,
        .c-table-data__rowaction {
            order: -1;
            width: auto;
        }
        .c-table-data__rowaction {
            margin-left: auto;
        }
    }
}

// for drag and drop
tr.c-table-data__row.c-table-data__row {
    &--touch-drag-image,
    &--drag-image {
        border: 2px solid $il-focus-color;
        pointer-events: none;
        position: fixed;
        background-color: $il-main-bg;
        box-shadow: $il-shadow--large;
    }
    &--drag-origin {
        opacity: .5;
        background-color: $il-main-darker-bg;
        box-shadow: $table-ordering__inset-row__shadow;
        td {
            background: transparent;
        }
    }
    &--placeholder {
        box-shadow: $table-ordering__inset-row__shadow;
        height: 25px;
        td {
            background-color: transparent;
        }
    }
    &--drag-settle {
        animation: drag-settle;
        animation-duration: 0.2s;
    }
}

@keyframes drag-settle {
    0% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}