<div class="card d-grid grid__col--6-6--md m-b-0">
  <div class="d-flex d-col content-fullpage bg-level-0">
    <div class="inner-scroll">
      <div class="card-header large-padding separator sticky-top">
        <div class="card-icon">
          <i c8y-icon="internal"></i>
        </div>
        <div class="card-title">
          {{ 'Messages' | translate }}
        </div>
      </div>
      <div class="card-block large-padding overflow-visible p-t-0" ng-if="!vm.hideRequestTemplates">
        <c8y-ui-empty-state
          ng-if="vm.templatesPreviews.requestTemplates.length == 0"
          [icon]="'arrow-circle-left'"
          [title]="'No messages.' | translate"
          [subtitle]="
            'After adding your first message, the CSV preview will be shown here.' | translate
          "
        ></c8y-ui-empty-state>

        <table
          class="table table-striped table-hover c8y-table-responsive"
          ng-if="vm.templatesPreviews.requestTemplates.length"
        >
          <thead>
            <tr class="bg-level-0">
              <th class="sticky-top has-sticky-card-header" translate>Name</th>
              <th class="sticky-top has-sticky-card-header" translate>API</th>
              <th class="sticky-top has-sticky-card-header" translate>Method</th>
              <th class="sticky-top has-sticky-card-header" translate>Preview</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="templatePreview in vm.templatesPreviews.requestTemplates">
              <td data-label="{{ 'Name' | translate }}" ng-bind="templatePreview.name"></td>
              <td data-label="{{ 'API' | translate }}" ng-bind="templatePreview.api"></td>
              <td data-label="{{ 'Method' | translate }}" ng-bind="templatePreview.method"></td>
              <td data-label="{{ 'Preview' | translate }}">
                <code ng-bind="templatePreview.csv"></code>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="inner-scroll" ng-if="!vm.hideResponseTemplates">
      <div class="card-header large-padding separator-top-bottom sticky-top">
        <div class="card-icon">
          <i c8y-icon="external"></i>
        </div>
        <div class="card-title">
          {{ 'Responses' | translate }}
        </div>
      </div>
      <div class="card-block large-padding overflow-visible p-t-0 m-t-16">
        <c8y-ui-empty-state
          ng-if="vm.templatesPreviews.responseTemplates.length == 0"
          [icon]="'arrow-circle-left'"
          [title]="'No responses.' | translate"
          [subtitle]="
            'After adding your first response, the CSV preview will be shown here.' | translate
          "
        ></c8y-ui-empty-state>

        <table
          class="table table-striped table-hover c8y-table-responsive"
          ng-if="vm.templatesPreviews.responseTemplates.length"
        >
          <thead>
            <tr class="bg-level-0">
              <th class="sticky-top has-sticky-card-header" translate>Name</th>
              <th class="sticky-top has-sticky-card-header" translate>Preview</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="templatePreview in vm.templatesPreviews.responseTemplates">
              <td data-label="{{ 'Name' | translate }}" ng-bind="templatePreview.name"></td>
              <td data-label="{{ 'Preview' | translate }}">
                <code ng-bind="templatePreview.csv"></code>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="content-fullpage bg-level-1" c8y-copy-to-clipboard>
    <div class="inner-scroll d-flex d-col">
      <div class="card-header large-padding separator">
        <div class="card-icon">
          <i c8y-icon="c8y-smart-rest"></i>
        </div>
        <div class="card-title">
          {{ 'Template creation CSV' | translate }}
        </div>
      </div>
      <div class="card-block d-flex d-col flex-grow large-padding">
        <label for="previewArea" class="sr-only">{{ 'CSV preview' | translate }}</label>
        <textarea
          class="inner-scroll flex-grow form-control text-monospace"
          c8y-copy-to-clipboard-input
          id="previewArea"
          ng-model="vm.creationCsv"
          readonly
        ></textarea>
      </div>
      <div class="card-footer large-padding separator">
        <button
          class="btn btn-default"
          title="{{ 'Copy to clipboard' | translate }}"
          c8y-copy-to-clipboard-button
        >
          <i c8y-icon="copy"></i>
          <span>
            {{ 'Copy to clipboard' | translate }}
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
