// ---------------------------------------------------------------------------- panel header buttons
.history-panel-header {
    .panel-header-button {
        display : inline-block;
        height  : @icon-btn-size;
        width   : @icon-btn-size;
        text-align  : center;
        line-height : @icon-btn-size - 3;
        font-size   : 1.2em;

        padding: 0px;
    }
}


// ---------------------------------------------------------------------------- dataset states
//.dataset .state-icon {
.state-icon {
    .fa-icon;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 16px;
}

// ............................................................................ animated or composite state icons
.state-icon-running {
    //TODO: couldn't find a way to do this with fa/spinning.less as mixin
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;

    @-moz-keyframes spin {
        0% { -moz-transform: rotate(0deg); }
        100% { -moz-transform: rotate(359deg); }
    }
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(359deg); }
    }
    @-o-keyframes spin {
        0% { -o-transform: rotate(0deg); }
        100% { -o-transform: rotate(359deg); }
    }
    @-ms-keyframes spin {
        0% { -ms-transform: rotate(0deg); }
        100% { -ms-transform: rotate(359deg); }
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(359deg); }
    }
    &:before {
        content: @fa-var-spinner;
    }
}

.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-var-arrow-up;
    }
}

.state-icon-error {
    background-color: white;
    border-radius: 8px;
    &:before {
        font-size: 20px;
        line-height: 16px;
        color: red;
        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 {
            .state-icon-error;
        }
    }

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

    &.state-queued {
        background: @state-default-bg;
        .state-icon {
            &:before {
                content: @fa-var-clock-o;
            }
        }
    }

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

    &.state-paused {
        background: @state-paused-bg;
        .state-icon {
            &:before {
                content: @fa-var-pause;
            }
        }
    }

    &.state-discarded {
        background: @state-default-bg;
        .state-icon {
            &:before {
                content: @fa-var-trash-o;
            }
        }
    }

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

    &.state-new {
        background: @state-default-bg;
        .state-icon {
            &:before {
                content: @fa-var-exclamation-circle;
            }
        }
    }
}

// ---------------------------------------------------------------------------- datasets within the history panel
.dataset {
    .has-job-state-mixin;

    .details {
        .summary {
            .blurb {
                margin-bottom: 2px;
            }
            .datatype, .dbkey {
                display: inline;
                .value {
                    font-weight: bold;
                }
            }
            .datatype .value:after {
                content: ',';
                .list-item .help-text;
                margin-right: 4px;
            }
            .dbkey:after {
                content: ' ';
                display: block;
                .list-item .vertical-spacing;
            }
            .info {
                .list-item .info-section;
                overflow: auto;
                .value {
                    white-space: pre-line;
                }
            }
            .job-error-text {
                .list-item .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)
            .list-item .vertical-spacing;
        }

        .actions {
            // bit hacky here bc dropdown wrapped in div
            .metafile-dropdown {
                display: inline-block;
            }
            .visualizations-dropdown {
                display: inline-block;
            }
            
            .left {
                .icon-btn-group();
                float: left;
                .icon-btn {
                    margin-right: @icon-btn-margin;
                }
                // have to reapply here - dropdown wrapped in div
                .icon-btn.visualization-btn {
                    margin-left: 0px;
                    border-radius: 0px 3px 3px 0px;
                    border-right: 1px solid @icon-btn-border;
                }
            }
            .right {
                .icon-btn-group();
                float: right;
                .icon-btn {
                    margin-left: @icon-btn-margin;
                }
            }
            &:not(:last-child) {
                .list-item .vertical-spacing;
            }
        }

        //TODO: move these out
        .tags-display {
            display: none;
            .list-item .vertical-spacing;
            .select2-container {
                min-width: 0px;
                .select2-choices {
                    border-radius: 3px;
                }
            }
        }
        .annotation-display {
            display: none;
            .list-item .vertical-spacing;
            .annotation {
                .list-item .info-section;
                //white-space: pre-line;
                white-space: pre-wrap;
                overflow: auto;
            }
            // fake placeholder for editable text annotation
            .annotation:empty:after {
                position: relative;
                top: -4px;
                font-size: 10px;
                font-style: italic;
                color: grey;
                //TODO: move out for localization
                content : 'Click here to edit annotation';
            }
            textarea {
                margin: 0px 0px 2px 0px;
                display: block;
                border-radius: 3px;
                width: 100%;
            }
        }

        .display-applications {
            .display-application:last-child {
                .list-item .vertical-spacing;
            }
        }

        .dataset-peek {
            .list-item .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: @panel-primary-heading-bg;
            }
            table, th, tr, td {
                font-family: @font-family-monospace;
                font-size: 10px;
            }
        }
    }
}


.history-content.dataset,
.history-content.dataset-collection {

    .title-bar {
        .title {
            .hid:after {
                content: ':';
            }
        }
    }
}

// ---------------------------------------------------------------------------- history
.history-panel {

    .controls {
        margin: 10px 10px 0px 10px;
        padding: 0px;

        .messages {
            margin-bottom: 0px;
            & > * {
                cursor: pointer;
                &:last-child {
                    margin-bottom: 8px;
                }
            }
        }

        .title {
            margin-bottom: 4px;
            input {
                width: 100%;
                // keep the text in position
                margin: -3px 0px -3px -3px;
                font-weight: bold;
            }
        }
        .subtitle:not(:empty){
            margin-top: -4px;
            margin-bottom: 6px;
        }
        .editable-text {
            border: solid transparent 1px;
        }
        .editable-text:hover {
            cursor: pointer;
            border: 1px dotted #999999;
        }

        .history-size {
            display: inline-block;
            margin-top: 4px;
            color: black;
        }
        .actions {
            margin-bottom: 0px;
        }

        .quota-message {
            display: none;
            margin: 8px 0px 5px 0px;
        }

        //TODO: move these out
        .tags-display, .annotation-display {
            display: none;
            margin-bottom: 8px;
            label {
                display: block;
                margin: 0px;
                padding: 0px;
                font-weight: normal;
                color: #555;
            }
            label:after {
                content: ':';
            }
        }
        .tags-display {
            .select2-container {
                min-width: 0px;
                .select2-choices {
                    border-radius: 3px;
                }
            }
            input {
                border-radius: 3px;
            }
        }
        .annotation-display {
            .annotation {
                //display: inline-block;
                border-radius: 3px;
                border: 1px solid fadeout( @layout-border-color, 50% );
                padding: 4px;
                //white-space: pre-line;
                white-space: pre-wrap;
                overflow: auto;
            }
            // fake placeholder for editable text annotation
            .annotation:empty:after {
                position: relative;
                top: -4px;
                font-size: 10px;
                font-style: italic;
                color: grey;
                //TODO: move out for localization
                content : 'Click here to edit annotation';
            }
            textarea {
                margin: 0px 0px 2px 0px;
                //display: block;
                border-radius: 3px;
                width: 100%;
            }
        }
    }

    // display only a top border on all
    .list-item.history-content {
        border-width: 1px 0px 0px 0px;
        // add a bottom border on the last
        &:last-child {
            border-width: 1px 0px 1px 0px;
        }
    }

    .empty-message {
        margin: 0px 10px 0px 10px;
    }
}


// ---------------------------------------------------------------------------- collections nested in histories
.history-panel {
    .dataset-collection {
        .subtitle {
            margin-top: 2px;
        }
    }
    .dataset-collection-panel {
        .controls {
            padding: 0px;
        }
        .list-items {
            margin-top: 0px;
        }
    }
}


// ---------------------------------------------------------------------------- annotated-history-panel
.annotated-history-panel {
    .controls {
        margin: 0px;
        .name {
            font-size: 150%;
            margin-bottom: 4px;
        }
        .subtitle {
            color: black;
            &:not(:empty) {
                margin: 0px 0px 0px 4px;
            }
        }
        .messages {
            &:not(:empty) {
                margin-top: 16px;
            }
        }
        // annotations are displayed by default in this view
        .annotation-display {
            display: block;
            border: 1px solid lightgrey;
            border-width: 1px 0px 0px 0px;
            padding: 4px 0px 4px 0px;
            margin: 4px 4px 0px 4px;
            white-space: pre-wrap;
            &:empty {
                display: none;
            }
        }

        .search {
            padding: 16px 0px 0px 0px;
            margin-bottom: 0px;
        }
    }

    table.list-items {
        width: 100%;
        table-layout: fixed;

        .headers {
            border-bottom: 2px solid grey;
        }
        .headers th {
            padding: 8px;
        }
        & > tbody > tr {
            // tr is clickable for expansion
            cursor: pointer;
            border-bottom: 1px solid grey;
            & > td {
                margin: 0px;
                padding: 0px;
                vertical-align: top;
                &:nth-child(1) {
                    width: 50%;
                }
                &:nth-child(2) {
                    /* top and bottom should be == title-bar padding */
                    padding: 8px 16px 8px 16px;
                    // do not html format
                    white-space: pre-wrap;
                }
                // tr has border - remove from items
                & > .list-item {
                    border: 0px;
                }
            }
        }
    }
    .empty-message {
        margin-top: 8px;
    }
}


// ---------------------------------------------------------------------------- current-history-panel
.current-history-panel {
    // .current-content is added to dataset/collection when displayed/edited/visualized, etc.
    //  (roughly: when it's being used in the center panel)
    .list-item.history-content.current-content {
        //TODO: Galaxy's 'bs-primary' color - not sure where this is defined
        border-left: 5px solid #4E5777;
    }
}


// ---------------------------------------------------------------------------- multi-view / multi-panel
.multi-panel-history {
    @mph-column_width: 312px;
    @mph-border_width: 1px;
    @mph-column_gap: 8px;
    @mph-header_height: 29px;
    @mph-footer_height: 0;
    @mph-controls_height: 20px;

    // for some reason, .flex-row-container below won't be applied to multi-panel-history since it's the enclosing node
    // re-apply here
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    .flex-row-container,
    .flex-column-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;

        /* force ff to squish beyond content:
           https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility#CSS */
        min-width: 0px;
        min-height: 0px;

        -webkit-align-items: stretch;
        -ms-align-items: stretch;
        align-items: stretch;

        -webkit-align-content: stretch;
        -ms-align-content: stretch;
        align-content: stretch;

        -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .flex-row-container {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .flex-column-container {
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .flex-row,
    .flex-column {
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;

        -webkit-align-self: auto;
        -ms-flex-item-align: auto;
        align-self: auto;
    }

    /* ---------------------- header & footer */
    .header,
    .footer {
        width: 100%;
        background-color: lightgrey;
        .btn {
            height: 21px;
        }
    }
    .header {
        min-height: @mph-header_height;
        max-height: @mph-header_height;
        // popover containing sorting and filters
        .more-options {
            .btn {
                height: 26px;
            }
            input[type=checkbox] {
                margin-top: 1px;
            }
        }
    }
    .footer {
        min-height: @mph-footer_height;
        max-height: @mph-footer_height;
    }

    // make the buttons in the header/footers and the panel controls slightly smaller
    .smaller-btn {
        height: 20px;
        line-height: normal;
        font-size: 90%;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    // the header/footers controls
    .control-column {
        margin-top: 4px;

        .btn {
            .smaller-btn;
        }
        .search-control {
            display: inline-block;
            width: 40%;

            .search-clear,
            .search-loading {
                margin-top: -22px;
            }
        }
        input.search-query {
            font-size: 90%;
            height: 21px;
            line-height: normal;
            padding: 2px 2px 1px 2px;
        }
        .open-more-options {
            padding: 2px 6px 2px 6px;
            font-size: 100%;
        }
        .header-info {
            display: inline-block;
            padding: 2px 4px 2px 4px;
            color: grey;
        }

        &.control-column-right,
        &.control-column-left {
            margin-right: 8px;
            margin-left: 8px;
            & > * {
                margin: 0px 4px 4px 0px;
            }
        }
        &.control-column-center {
            text-align: center;
            max-height: 22px;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;

            /* truncate */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-height: 22px;
        }
        &.control-column-right {
            text-align: right;
        }
    }

    /* ---------------------- middle */
    .outer-middle {
        overflow: auto;
    }
    .middle {
        min-width: 100%;
        margin: 0px 0px 0px 0px;
        background-color: white;
        padding: @mph-column_gap;
    }

    .history-column {
        width: @mph-column_width;
        margin: 0px @mph-column_gap 0px 0px;

        // current history
        &:first-child {
            position: fixed;
            z-index : 10;

            // visually differentiate the current history
            .history-panel {
                border: 1px solid black;
                box-shadow: 4px 4px 4px rgba( 96, 96, 96, 0.3 );
            }
        }
        &:nth-child(2) {
            // push the column after the current away from the left (since it's fixed)
            margin-left: ( @mph-column_width + @mph-column_gap );
        }
        &:last-child {
            margin-right: 0px;
        }
        .dropdown-menu {
            z-index: inherit;
        }

        .panel-controls {
            width: 100%;
            height: ( @mph-controls_height + 4 );
            border-radius: 3px;
            background-color: white;
            text-align: center;

            -webkit-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            flex: 0 0 auto;

            -webkit-align-self: auto;
            -ms-flex-item-align: auto;
            align-self: auto;

            .btn {
                .smaller-btn;
            }
            .pull-left .btn {
                margin-right: 4px;
            }
            .pull-right .btn {
                margin-left: 4px;
            }
            .panel-menu {
                z-index: 1;
                .dropdown-menu a {
                    text-align: left;
                }
            }
            .current-label {
                display: inline-block;
                color: grey;
                padding-left: 2px;
                margin-top: 2px;
            }
        }
        .history-panel {
            width: 100%;

            border: @mph-border_width solid grey;
            border-radius: 3px;
            background-color: #DFE5F9;

            overflow: auto;
        }
    }
}


// ---------------------------------------------------------------------------- older styles
//TODO: these may still apply in mobile display, workflow stuff
body.historyPage {
    background: @side-panel-bg;
    color: @base-text-color;
    margin: 5px;
    border: 0;
    padding: 0;
}

// Control links at top of history
div.historyLinks {
    margin: 5px 5px;
}

// Default history item appearance
div.historyItem {
    margin: 0px -5px;
    padding: 8px 10px;
    border-top: solid @border-default-color 1px;
    // border-left: solid @state-queued-border 5px;
    border-right: none;
    word-wrap: break-word;
    background: @state-default-bg;
    .state-icon {
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        background-position: 0 1px;
        background-repeat: no-repeat;
    }
    .historyItemTitle {
        font-weight: bold;
        line-height: 16px;
    }
}

.historyItemContainer:last-child div.historyItem {
    border-bottom: solid @border-default-color 1px;
}

// Nested history items
div.historyItem div.historyItem {
    margin-right: -11px;
}

// Change background/border color depending on state
div.historyItem-ok,
div.historyItem-failed_metadata {
    background: @state-success-bg;
    .state-icon {
        display: none;
    }
}

//@import "sprite-history-states.less";

div.historyItem-error {
    background: @state-danger-bg;
    .state-icon {
        .sprite(@data_error);
    }
}

div.historyItem-empty {
    background: @state-danger-bg;
    .state-icon {
        .sprite(@data_empty);
    }
}

div.historyItem-running {
    background: @state-running-bg;
    .state-icon {
        background-image: url(data_running.gif);
    }
}

div.historyItem-setting_metadata {
    background: @state-running-bg;
    .state-icon {
        background-image: url(data_running.gif);
    }
}

div.historyItem-upload {
    background: @state-info-bg;
    .state-icon {
        background-image: url(data_upload.gif);
    }
}

div.historyItem-queued {
    background: @state-default-bg;
    .state-icon {
        .sprite(@data_queued);
    }
}

div.historyItem-noPermission {
    filter: alpha(opacity=60);
    -moz-opacity: .60;
    opacity: .60;
    .state-icon {
        line-height: 16px;
        .fa-icon;
        &:before {
            content: "\f05e";
        }
    }
}

div.historyItem-paused {
    background: @state-paused-bg;
    .state-icon {
        line-height: 16px;
        .fa-icon;
        &:before {
            content: "\f04c";
        }
    }
}

div.historyItem-new {
    .state-icon {
        line-height: 16px;
        .fa-icon;
        &:before {
            content: "\f071";
        }
    }
}

// Special case for showing the spinner but not changing the background
div.historyItemTitleBar.spinner .state-icon {
    background: url(data_running.gif) 0 1px no-repeat !important;
}

// Buttons
div.historyItemButtons {
    float: right;

    @import "sprite-history-buttons.less";

    .icon-button.display {
        .sprite(@eye_icon);
    }
    .icon-button.display:hover {
        .sprite(@eye_icon_dark);
    }
    .icon-button.display_disabled {
        .sprite(@eye_icon_grey);
    }
    .icon-button.delete {
        .sprite(@delete_icon);
    }
    .icon-button.delete:hover {
        .sprite(@delete_icon_dark);
    }
    .icon-button.delete_disabled {
        .sprite(@delete_icon_grey);
    }
    .icon-button.edit {
        .sprite(@pencil_icon);
    }
    .icon-button.edit:hover {
        .sprite(@pencil_icon_dark);
    }
    .icon-button.edit_disabled {
        .sprite(@pencil_icon_grey);
    }
}

div.historyItemBody div {
    padding-top: 2px;
}

pre.peek {
    background: white;
    color: black;
    width: 100%;
    font-size: 10px;
    overflow: auto;
    th {
        color: white;
        background: @panel-primary-heading-bg;
    }
    table, th, tr, td {
        font-family: @font-family-monospace;
        font-size: 10px;
    }
}