<div ng-controller="SmartRestTemplateDetailsCtrl as $ctrl">
  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item
      icon="c8y-smart-rest"
      label="{{ 'Responses' | translate }}"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      icon="c8y-smart-rest"
      label="{{ $ctrl.template.name }}"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      icon="c8y-smart-rest"
      label="{{ 'SmartREST templates' | translate }}"
      path="#smart-rest-templates"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      icon="c8y-device-protocols"
      label="{{ 'Device types' | translate }}"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>
  <div class="card content-fullpage split-view--5-7">
    <div
      class="card-block flex-no-shrink bg-level-1 large-padding p-t-24 p-b-24 separator-bottom grid__col--fullspan"
    >
      <div class="content-flex-70">
        <div class="text-center">
          <i
            class="c8y-icon-duocolor icon-48"
            c8y-icon="c8y-smart-rest"
          ></i>
        </div>
        <div class="flex-grow col-10">
          <form
            class="content-flex-80"
            name="templateInputForm"
            novalidate
          >
            <div class="col-7 p-t-sm-8">
              <div class="form-group form-group-lg m-b-0">
                <label
                  class="sr-only"
                  for="templateName"
                >
                  {{ 'Template name' | translate }}
                </label>
                <div class="input-group input-group-lg input-group-editable">
                  <input
                    class="form-control"
                    ng-style="{ width: $ctrl.template.name.length + 2 + 'ch' }"
                    title="{{ $ctrl.template.name }}"
                    placeholder="{{ 'e.g. My template' | translate }}"
                    name="name"
                    for="templateName"
                    type="text"
                    required
                    maxlength="500"
                    ng-model="$ctrl.template.name"
                  />
                  <span></span>
                  <div class="input-group-btn">
                    <button
                      class="btn btn-primary"
                      title="{{ 'Save' | translate }}"
                      type="submit"
                      ng-disabled="templateInputForm.$invalid"
                      ng-click="$ctrl.changeTemplateName($ctrl.template.name)"
                    >
                      {{ 'Save' | translate }}
                    </button>
                  </div>
                </div>
                <c8y-error-feedback
                  field="templateInputForm.name"
                  check-on-dirty="true"
                ></c8y-error-feedback>
              </div>
            </div>
            <div class="col-5">
              <div class="form-group m-b-0">
                <label class="text-label-small text-nowrap m-r-4 m-b-0">
                  {{ 'ID' | translate }}
                </label>
                <p class="form-control-static">
                  {{ $ctrl.template.__externalId }}
                </p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="inner-scroll split-view__list">
      <div class="bg-level-1 flex-grow">
        <div class="nav c8y-nav-stacked">
          <button
            class="c8y-stacked-item"
            ng-class="{ active: $ctrl.selectedResponseTemplate === responseTemplate }"
            type="button"
            ng-repeat="responseTemplate in $ctrl.responseTemplates"
            ng-click="$ctrl.selectResponseTemplate(responseTemplate)"
          >
            <span
              class="text-truncate"
              title="{{ responseTemplate.msgId }} | {{ responseTemplate.name }}"
            >
              <i
                class="text-complementary"
                c8y-icon="external"
              ></i>
              <span
                class="msgid text-muted"
                ng-bind="responseTemplate.msgId"
              ></span>
              <span ng-bind="responseTemplate.name"></span>
            </span>
          </button>
          <div
            class="p-24"
            ng-show="$ctrl.countResponseTemplates($ctrl.template) === 0"
          >
            <c8y-ui-empty-state
              [icon]="'c8y-smart-rest'"
              [title]="'No responses.' | translate"
              [subtitle]="'Click below to add the first one.' | translate"
            ></c8y-ui-empty-state>
          </div>
        </div>
      </div>
      <div class="card-footer large-padding separator sticky-bottom">
        <button
          class="btn btn-default"
          title="{{ 'Add response' | translate }}"
          ng-click="$ctrl.newResponseTemplate()"
          data-cy="responses--add-response-btn"
        >
          <i c8y-icon="plus-circle"></i>
          <translate>Add response</translate>
        </button>
      </div>
    </div>
    <div
      class="inner-scroll split-view__detail"
      ng-class="{ 'split-view__detail--selected': $ctrl.selectedResponseTemplate }"
    >
      <div class="card-header separator visible-sm visible-xs">
        <button
          class="btn btn-clean"
          title="{{ 'Back' | translate }}"
          ng-click="$ctrl.deselectResponseTemplate()"
        >
          <i c8y-icon="chevron-left"></i>
          <span translate>Back</span>
        </button>
      </div>
      <div
        class="card-block"
        ng-if="!$ctrl.selectedResponseTemplate"
      >
        <c8y-ui-empty-state
          [icon]="'c8y-smart-rest'"
          [title]="'No response to display.' | translate"
          [subtitle]="'Add or select a message.' | translate"
        ></c8y-ui-empty-state>
      </div>
      <c8y-smart-rest-response-editor
        class="d-contents"
        template="$ctrl.template"
        response-template="$ctrl.selectedResponseTemplate"
        on-save="$ctrl.addResponseTemplate(responseTemplate)"
        on-cancel="$ctrl.deselectResponseTemplate()"
        on-remove="$ctrl.removeResponseTemplate(responseTemplate)"
        ng-if="$ctrl.selectedResponseTemplate"
      ></c8y-smart-rest-response-editor>
    </div>
  </div>
</div>
