@import "sprite-history-states.scss";
@import "sprite-history-buttons.scss";
@import "@fortawesome/fontawesome-free/scss/_variables";

// ---------------------------------------------------------------------------- dataset states
//.dataset .state-icon {

.state-icon {
    @extend .fa;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 14px;
}

.state-icon-running {
    @extend .fa-spin;
    @extend .fa-spinner;
    filter: blur(0);
}

.state-icon-upload {
    overflow: hidden;

    &:before {
        display: inline-block;
        -webkit-animation: eclipse 2s infinite linear;
        -moz-animation: eclipse 2s infinite linear;
        -o-animation: eclipse 2s infinite linear;
        animation: eclipse 2s infinite linear;

        @-moz-keyframes eclipse {
            0% {
                -moz-transform: translate(0px, 16px);
            }
            100% {
                -moz-transform: translate(0px, -16px);
            }
        }
        @-webkit-keyframes eclipse {
            0% {
                -webkit-transform: translate(0px, 16px);
            }
            100% {
                -webkit-transform: translate(0px, -16px);
            }
        }
        @-o-keyframes eclipse {
            0% {
                -o-transform: translate(0px, 16px);
            }
            100% {
                -o-transform: translate(0px, -16px);
            }
        }
        @-ms-keyframes eclipse {
            0% {
                -ms-transform: translate(0px, 16px);
            }
            100% {
                -ms-transform: translate(0px, -16px);
            }
        }
        @keyframes eclipse {
            0% {
                transform: translate(0px, 16px);
            }
            100% {
                transform: translate(0px, -16px);
            }
        }
        content: fa-content($fa-var-arrow-up);
    }
}

.state-icon-error {
    background-color: white;
    border-radius: 8px;
    &:before {
        font-size: 20px;
        line-height: 16px;
        color: red;
        content: fa-content($fa-var-times-circle);
    }
}

// ............................................................................ state bgs and icons
.has-job-state-mixin {
    // Change background/border color depending on state
    &.state-ok,
    &.state-failed_metadata {
        background: $state-success-bg;
        .state-icon {
            display: none;
        }
    }

    &.state-error,
    &.state-empty {
        background: $state-danger-bg;
        .state-icon {
            @extend .state-icon-error;
        }
    }

    &.state-upload {
        background: $state-info-bg;
        .state-icon {
            @extend .state-icon-upload;
        }
    }

    &.state-queued {
        background: $state-default-bg;
        .state-icon {
            &:before {
                content: fa-content($fa-var-clock);
            }
        }
    }

    &.state-running,
    &.state-setting_metadata {
        background: $state-running-bg;
        .state-icon {
            @extend .state-icon-running;
        }
    }

    &.state-paused {
        background: $state-info-bg;
        .state-icon {
            &:before {
                content: fa-content($fa-var-pause);
            }
        }
    }

    &.state-discarded {
        background: $state-default-bg;
        .state-icon {
            &:before {
                content: fa-content($fa-var-trash);
            }
        }
    }

    &.state-noPermission {
        background: $state-default-bg;
        filter: alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;
        .state-icon {
            font-size: 20px;
            &:before {
                content: fa-content($fa-var-lock);
            }
        }
    }

    &.state-new {
        background: $state-default-bg;
        .state-icon {
            &:before {
                content: fa-content($fa-var-clock);
            }
        }
    }

    &.state-loading {
        background: $state-default-bg;
        .state-icon {
            @extend .state-icon-running;
        }
    }
}

.blinking {
    animation: blinker 500ms linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

// ----------------------------------------------------------------------------
// datasets as list-items

.list-item.dataset,
.list-item.dataset-collection,
.list-item.history-content {
    border-color: rgba(0, 0, 0, 0.15);
}

.dataset {
    @extend .has-job-state-mixin;

    .details {
        .summary {
            .blurb {
                margin-bottom: 2px;
            }
            .datatype,
            .dbkey {
                display: inline;
                .value {
                    font-weight: bold;
                }
            }
            .dbkey {
                .value {
                    white-space: normal;
                    overflow-wrap: break-word;
                }
            }
            .datatype .value:after {
                content: ",";
                @extend %help-text;
                margin-right: 4px;
            }
            .dbkey:after {
                content: " ";
                display: block;
                @extend %vertical-spacing;
            }
            .info {
                @extend %info-section;
                overflow: auto;
                .value {
                    white-space: pre-line;
                }
            }
            .job-error-text {
                @extend %info-section;
                overflow: auto;
                white-space: pre;
            }
            // handle the last vertical gap in the parent as summary is used in other states as well (w/o info)
            @extend %vertical-spacing;
        }

        .actions {
            // bit hacky here bc dropdown wrapped in div
            .metafile-dropdown {
                display: inline-block;
            }
            .visualizations-dropdown {
                display: inline-block;
            }

            .left {
                @extend .icon-btn-group;
                float: left;
                .icon-btn {
                    margin-right: $icon-btn-margin;
                }
            }
            .right {
                @extend .icon-btn-group;
                float: right;
                .icon-btn {
                    margin-left: $icon-btn-margin;
                }
            }
            &:not(:last-child) {
                @extend %vertical-spacing;
            }
        }

        .annotation-display {
            display: none;
            @extend %vertical-spacing;
            .annotation {
                @extend %info-section;
                white-space: pre-wrap;
                overflow: auto;
            }
            // fake placeholder for editable text annotation
            .annotation:empty:after {
                @extend .position-relative;
                @extend .font-italic;
                @extend .h6;
                color: $text-muted;
                //TODO: move out for localization
                content: "Click here to edit annotation";
            }
            textarea {
                margin: 0px 0px 2px 0px;
                display: inline-block;
                border-radius: 3px;
                width: 100%;
            }
        }

        .display-applications {
            .display-application:last-child {
                @extend %vertical-spacing;
            }
        }

        .toolhelp {
            width: 100%;
            background: #eee;
            border-radius: 3px;
            margin-top: 5px;
            padding: 3px;
        }

        .dataset-peek {
            @extend %vertical-spacing;
            width: 100%;
            margin: 0px;
            border-radius: 3px;
            background: white;
            color: black;
            font-size: 10px;
            overflow: auto;

            //TODO: there doesn't seem to be a way to pad text-only peeks (binary data, etc.)
            th {
                color: white;
                background: $brand-primary;
            }
            table,
            th,
            tr,
            td {
                font-family: $font-family-monospace;
                font-size: 10px;
            }
        }
    }
}

// ---------------------------------------------------------------------------- older styles
pre.peek {
    background: white;
    color: black;
    width: 100%;
    font-size: 10px;
    overflow: auto;
    th {
        color: white;
        background: $brand-primary;
    }
    table,
    th,
    tr,
    td {
        font-family: $font-family-monospace;
        font-size: 10px;
    }
}