<div ng-controller="SmartRestTemplateDetailsCtrl as $ctrl">
  <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 name="templateInputForm" novalidate class="content-flex-80">
            <div class="col-7 p-t-sm-8">
              <div class="form-group form-group-lg m-b-0">
                <label class="sr-only" for="tName">{{ 'Template name' | translate }}</label>
                <div class="input-group input-group-lg input-group-editable">
                  <input
                    class="form-control"
                    maxlength="500"
                    required
                    type="text"
                    name="name"
                    id="tName"
                    ng-model="$ctrl.template.name"
                    data-cy="request--template-name"
                    ng-style="{ width: $ctrl.template.name.length + 2 + 'ch' }"
                    title="{{ $ctrl.template.name }}"
                    placeholder="{{ 'e.g. My template' | translate }}"
                  />
                  <span></span>
                  <div class="input-group-btn">
                    <button
                      class="btn btn-primary"
                      title="{{ 'Save' | translate }}"
                      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"
            type="button"
            ng-click="$ctrl.selectRequestTemplate(requestTemplate)"
            ng-repeat="requestTemplate in $ctrl.requestTemplates | orderBy:'msgId'"
            ng-class="{ active: $ctrl.selectedRequestTemplate === requestTemplate }"
          >
            <span
              class="text-truncate"
              title="{{ requestTemplate.msgId }} | {{ requestTemplate.name }}"
            >
              <i c8y-icon="internal" class="text-primary"></i>
              <span class="msgid text-muted" ng-bind="requestTemplate.msgId"></span>
              <span ng-bind="requestTemplate.name"></span>
            </span>
          </button>
          <div ng-show="$ctrl.countRequestTemplates($ctrl.template) === 0" class="p-24">
            <c8y-ui-empty-state
              [icon]="'c8y-smart-rest'"
              [title]="'No messages.' | translate"
              [subtitle]="'Click below to add the first one.' | translate"
            ></c8y-ui-empty-state>
          </div>
        </div>
      </div>
      <div class="card-footer large-padding separator grid__col--fullspan sticky-bottom">
        <button
          title="{{ 'Add message' | translate }}"
          class="btn btn-default"
          type="button"
          ng-click="$ctrl.newRequestTemplate()"
          data-cy="add-message"
        >
          <i c8y-icon="plus-circle"></i>
          <translate>Add message</translate>
        </button>
      </div>
    </div>

    <div
      class="inner-scroll split-view__detail"
      ng-class="{ 'split-view__detail--selected': $ctrl.selectedRequestTemplate }"
    >
      <div class="card-header separator visible-sm visible-xs">
        <button
          title="{{ 'Back' | translate }}"
          type="button"
          class="btn btn-clean"
          ng-click="$ctrl.deselectRequestTemplate()"
        >
          <i c8y-icon="chevron-left"></i>
          <span translate>Back</span>
        </button>
      </div>
      <div class="card-block" ng-if="!$ctrl.selectedRequestTemplate">
        <c8y-ui-empty-state
          [icon]="'c8y-smart-rest'"
          [title]="'No message to display.' | translate"
          [subtitle]="'Add or select a message.' | translate"
        ></c8y-ui-empty-state>
      </div>
      <c8y-smart-rest-request-editor
        template="$ctrl.template"
        request-template="$ctrl.selectedRequestTemplate"
        on-save="$ctrl.addRequestTemplate(requestTemplate)"
        on-cancel="$ctrl.deselectRequestTemplate()"
        on-remove="$ctrl.removeRequestTemplate(requestTemplate)"
        class="d-contents"
        ng-if="$ctrl.selectedRequestTemplate"
      ></c8y-smart-rest-request-editor>
    </div>
  </div>
  <c8y-breadcrumbs-set>
    <c8y-breadcrumbs-item
      label="{{ 'Messages' | translate }}"
      icon="c8y-smart-rest"
    ></c8y-breadcrumbs-item>

    <c8y-breadcrumbs-item
      label="{{ $ctrl.template.name }}"
      icon="c8y-smart-rest"
    ></c8y-breadcrumbs-item>

    <c8y-breadcrumbs-item
      label="{{ 'SmartREST templates' | translate }}"
      icon="c8y-smart-rest"
      path="#smart-rest-templates"
    ></c8y-breadcrumbs-item>
    <c8y-breadcrumbs-item
      label="{{ 'Device types' | translate }}"
      icon="c8y-device-protocols"
    ></c8y-breadcrumbs-item>
  </c8y-breadcrumbs-set>
</div>
