@import 'ctl_base_ui/icons';
@import 'ctl_base_ui/variables';
@import 'ctl_base_ui/mixins';
@import 'ctl_base_ui/colors';
@import 'ctl_base_ui/typography';
@import 'extensions';
@import 'mixins';

#deployments_flow {
  h2.template-name {
    font-weight: normal;
    font-size: 2.2em;
  }

  h3.image-name {
    color: $blue_grey;
    margin: 0;
  }

  a.button-add-positive {
    margin-top: 30px;
    clear: both;
    @include transition('opacity 1.2s');
  }

  a.button-cancel {
    margin: 5px 0 0 10px;
  }

  .deployment-metadata {
    dl {
      margin: 0 0 10px 0;
      padding: 0 0 20px 0;
      border-bottom: 1px solid $grey;

      dt {
        color: $dark_grey;
        display: inline-block;

        &:after {
          content: ':'
        }
      }

      dd {
        color: lighten($blue_grey, 15%);
        display: inline-block;
        margin-right: 15px;
      }
    }
  }

  .deployment-settings {
    h3 {
      margin-bottom: 10px;
    }

    button.deploy {
      float: right;
    }

    .deployment-item {
      border-bottom: 1px solid $light_grey;
      padding-bottom: 30px;
      margin-bottom: 20px;

      .expand {
        padding-left: 20px;
        position: relative;
        cursor: pointer;

        &:before {
          @extend .icon-thick-arrow-right;
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 5px;
        }
      }

      .expanded:before {
        @extend .icon-thick-arrow-down;
      }

      .expand + .tab-container {
        @extend .expandable;
        min-height: 0;
      }

      .expanded + .tab-container {
        max-height: 850px;
        overflow-y: auto;
      }
    }

    .tab-container {
      .hide {
        display: none;
      }

      .cards {
        @include flex-grow(1);
        @include flex-shrink(1);
        @include flex-basis('auto');
      }

      .card {
        overflow: auto;
      }

      .tab label[for='options'] {
        .icon {
          background-position: 0 -150px;

          &.changed {
            background-position: -21px -150px;
          }
        }
      }

      .content {
        padding: 20px;
      }
    }
    .card.options {
      .entries {
        padding: 20px;

        .variable-name {
          color: $blue_grey;
          font-size: 0.9em;
          display: inline-block;
          margin-right: 20px;
          width: 130px;
        }

        p {
          padding: 10px 0;
        }

        .variable-value {
          display: inline-block;
        }

        select {
          width: 90px;
        }

        input[type=radio] {
          display: none;
        }

        .disabled {
          color: $grey;
        }
      }
    }
  }

  .deployment-target,
  .deployment {
    margin-bottom: 15px;
    font-size: 0.9em;

    .name {
      @extend .title;
      float: left;
      margin-bottom: 15px;
      margin-left: 15px;
      position: relative;
    }

    .status {
      font-size: 14px;
      color: $medium_grey;
      float: left;

      .last-updated,
      form {
        float: left;
        margin-left: 15px;
      }
      .last-updated {
        margin-top: 4px;
      }

      form button {
        @include border-box;
        border: none;
        background: none;
        position: relative;
        height: 15px;
        width: 15px;
        font-size: 0;

        &:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          @extend .icon-arrowloop-medium;
          @include icon-green;
        }

        &:hover:after {
          @include icon-light-green;
        }
      }
    }

    .actions {
      position: relative;
      float: right;
      width: 255px;

      .confirm-delete {
        top: 0;
        padding: 0 0 0 80px;
      }

      .redeploy {
        font-size: 14px;
        color: $white;
        display: inline-block;
        position: relative;
        float: right;
        padding: 10px 10px 10px 25px;
        margin-right: 20px;
        text-align: left;
        text-decoration: none;
        border-radius: 3px;
        background: $dark_grey;

        &:hover {
          background: $medium_grey;
        }

        &:after {
          @include icon-white;
          @extend .icon-arrowloop;
          content: '';
          position: absolute;
          left: 10px;
          top: 12px;
          display: block;
          height: 10px;
          width: 10px;
        }
      }

      .delete-action {
        @include hide-text;
        @extend .icon-x-large;
        @include icon-grey;
        padding: 0;
        margin-top: 6px;
        float: right;

        &:after {
          display: none;
        }

        &:hover {
          @include icon-red;
        }
      }
    }

    dl {
      margin-left: 15px;
      clear: left;
      overflow: auto;
      padding-bottom: 15px;

      dt, dd {
        float: left;
      }
      dt {
        font-weight: bold;
        margin-right: 7px;
      }
      dd {
        font-style: italic;
        margin-right: 20px;
      }
    }
  }

  .deployment-target {
    padding-bottom: 30px;
    border-bottom: 1px solid $light_grey;

    .token {
      padding: 0;
      background-color: $light_grey;
      position: relative;

      dt {
        cursor: pointer;
        position: relative;
        padding: 10px 0 10px 25px;
        color: $blue_grey;

        &:after {
          @extend .icon-thick-arrow-right;
          content: '';
          display: block;
          position: absolute;
          left: 10px;
          top: 11px;
        }

        &.expanded {
          &:after {
            @extend .icon-thick-arrow-down;
          }

          &+ .token-contents {
            max-height: 530px;
          }
        }
      }

      .actions {
        position: absolute;
        right: 10px;
        top: 10px;
        margin: 0;
        width: 300px;

        a {
          font-weight: normal;
          text-decoration: underline;
          margin-left: 10px;
        }
      }

      .token-contents {
        @extend .expandable;
        clear: left;
        font-family: $monospace_font_family;
        font-style: normal;
        word-wrap: break-word;


        .token-container {
          margin: 20px;
          padding: 20px;
          border: 1px solid $grey;
          background: $white;

          div {
            width: 605px;
          }
        }
      }
    }
  }

  .deployment {
    .name:after {
      @extend .icon-thick-arrow-right;
      content: '';
      display: block;
      position: absolute;
      left: -15px;
      top: 5px;
    }

    .services {
      @extend .expandable;
      overflow-y: auto;
      border-top: $light_grey 1px solid;
      padding-left: 15px;

      li {
        padding: 20px 0;
        border-bottom: $light_grey 1px solid;
      }
    }

    &.expanded {
      .name:after {
        @extend .icon-thick-arrow-down;
      }
      .services {
        max-height: 280px;
      }
    }

    .status-info {
      font-style: italic;
      text-transform: capitalize;
    }

  }

  #create_target {
    @extend .expandable;

    input[type="text"],
    textarea {
      width: 560px;
    }

    textarea {
      font-family: $monospace_font_family;
      height: 480px;
    }

    dt {
      margin: 15px 0 5px;
      color: $medium_grey;
    }

    button {
      margin-top: 5px;
      float: left;
    }

    &.expanded {
      max-height: 660px;

      & + .add-target {
        @include transition('opacity 1.2s');
        opacity: 0;
      }
    }
  }

  .add-target {
    margin-top: 30px;
    &:after {
      display: block;
      content: " ";
      clear: both;
      height: 0;
    }

    h2 {
      margin-bottom: 0;
    }

    a { text-decoration: underline; }
  }

  .providers {
    float: left;
    border-right: $light_grey 1px solid;
    padding-right: 15px;
    margin-right: 15px;
    width: 686px;
    @include border-box;

    .alternative-provider {
      padding-top: 10px;
      clear: left;
    }

    .provider {
      float: left;
      margin: 0 10px 10px 0;
      width: 200px;
      text-align: center;
      position: relative;

      span {
        display: block;
        padding: 0 10px;
        background-color: $light_grey;
        height: 60px;
        line-height: 50px;
      }

      .job-templates {
        display: none;
        position: absolute;
        padding: 20px;
        text-align: left;
        background-color: $dark_grey;

        h6, a {
          color: $white;
        }

        h6 {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 10px;
        }

        a {
          display: block;
          line-height: 30px;
          font-size: 14px;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }

      &:hover {
        .job-templates {
          display: block;
        }
      }
    }
  }

  .deployment-job {
    background: $light-grey;
    padding: 20px;
    margin-bottom: 20px;

    .deployment-job-progress {

      h5 {
        font-size: 18px;
        color: $dark_grey;
        border-bottom: $grey 1px solid;
      }

      .message {
        padding: 10px;
        font-style: italic;
      }

      .status-info {
        background-repeat: no-repeat;
        padding-left: 25px;
        padding-bottom: 2px;
        margin-left: 10px;
        color: $medium_grey;
      }

      .delete-action {
        padding-right: 15px;
        margin-left: 15px;
        float: right;
        position: relative;

        &:after {
          content: '';
          display: block;
          position: absolute;
          right: 0;
          top: 3px;
          @extend .icon-x;
          @include icon-grey;
        }

        &:hover:after {
          @include icon-red;
        }
      }

      h5 > .status-info {
        font-size: 14px;
      }

      h5 > a {
        float: right;
        font-size: 13px;
        color: $dark_grey;
        text-decoration: underline;
      }

      > .complete {
        h5 > .status-info {
          background-image: image-url('icon_status_running.png');
        }
      }

      > .running {
        h5 > .status-info {
          background-image: image-url('icon_loading_grey.gif');
        }

        .delete-action {
          visibility: hidden;
        }
      }

      > .error {
        h5 > .status-info {
          background-image: image-url('icon_status_stopped.png');
        }

        .message {
          color: $dark_red;
        }
      }

      ol li {
        font-size: 0.8em;
        color: $dark_grey;
        list-style: decimal;
        list-style-position: inside;
        height: 30px;
        line-height: 30px;

        &.complete .status-info {
          background-image: image-url('icon_status_running.png');
        }

        &.in-progress .status-info {
          background-image: image-url('icon_loading_grey.gif');
        }

        &.error .status-info {
          background-image: image-url('icon_status_stopped.png');
        }
      }
    }

    .deployment-job-documentation {
      background-color: $white;
      padding: 15px;
      padding-bottom: 0;
      margin-bottom: 20px;
    }

    .deployment-job-log .log-output {
      height: 300px;

      &.truncated {
        overflow: hidden;
        height: 0;
        padding: 0;
      }
    }
  }
}


/*
 This styles the select target dialog box which will be used
 in many flows so it should not be part of the #deployment_flow
*/
.select-remote-target {
  ul {
    list-style-type: none;

    li {
      padding: 20px 10px;
      border-bottom: 1px solid $grey;
      overflow: auto;

      dl {
        float: left;
        width: 50%;

        dt {
          color: $blue_grey;
          font-weight: bold;
          margin-bottom: 10px;
          font-size: 1.1em;
        }
      }

      a.button-positive {
        text-decoration: none;
        float: right;
      }
    }
  }

  .button-add-positive {
    margin-top: 10px;
  }
}

