<div id="service-resources">
  <rd-widget>
    <rd-widget-header icon="list" title-text="Resource limits and reservations"> </rd-widget-header>
    <rd-widget-body classes="no-padding">
      <table class="table">
        <tbody>
          <tr>
            <td style="vertical-align: middle"> Memory reservation (MB) </td>
            <td>
              <input
                class="input-sm"
                type="number"
                data-cy="docker-service-memory-reservation-input"
                step="0.125"
                min="0"
                ng-model="service.ReservationMemoryBytes"
                ng-change="updateServiceAttribute(service, 'ReservationMemoryBytes')"
                disable-authorization="DockerServiceUpdate"
              />
            </td>
            <td style="vertical-align: middle">
              <p class="small text-muted"> Minimum memory available on a node to run a task (set to 0 for unlimited) </p>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: middle"> Memory limit (MB) </td>
            <td>
              <input
                class="input-sm"
                type="number"
                data-cy="docker-service-memory-limit-input"
                step="0.125"
                min="0"
                ng-model="service.LimitMemoryBytes"
                ng-change="updateServiceAttribute(service, 'LimitMemoryBytes')"
                disable-authorization="DockerServiceUpdate"
              />
            </td>
            <td style="vertical-align: middle">
              <p class="small text-muted"> Maximum memory usage per task (set to 0 for unlimited) </p>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: middle">
              <div> CPU reservation </div>
            </td>
            <td>
              <slider
                data-cy="docker-service-cpu-reservation-slider"
                model="service.ReservationNanoCPUs"
                floor="0"
                ceil="state.sliderMaxCpu"
                step="0.25"
                precision="2"
                ng-if="service && state.sliderMaxCpu"
                on-change="updateServiceAttribute(service, 'ReservationNanoCPUs')"
                disable-authorization="DockerServiceUpdate"
              ></slider>
            </td>
            <td style="vertical-align: middle">
              <p class="small text-muted"> Minimum CPU available on a node to run a task </p>
            </td>
          </tr>
          <tr>
            <td style="vertical-align: middle">
              <div> CPU limit </div>
            </td>
            <td>
              <slider
                data-cy="docker-service-cpu-limit-slider"
                model="service.LimitNanoCPUs"
                floor="0"
                ceil="state.sliderMaxCpu"
                step="0.25"
                precision="2"
                ng-if="service && state.sliderMaxCpu"
                on-change="updateServiceAttribute(service, 'LimitNanoCPUs')"
                disable-authorization="DockerServiceUpdate"
              ></slider>
            </td>
            <td style="vertical-align: middle">
              <p class="small text-muted"> Maximum CPU usage per task </p>
            </td>
          </tr>
        </tbody>
      </table>
    </rd-widget-body>
    <rd-widget-footer authorization="DockerServiceUpdate">
      <div class="btn-toolbar" role="toolbar">
        <div class="btn-group" role="group">
          <button
            type="button"
            class="btn btn-primary btn-sm"
            ng-disabled="!hasChanges(service, ['LimitNanoCPUs', 'LimitMemoryBytes', 'ReservationNanoCPUs', 'ReservationMemoryBytes'])"
            ng-click="updateService(service)"
            >Apply changes</button
          >
          <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <pr-icon icon="'chevron-down'"></pr-icon>
          </button>
          <ul class="dropdown-menu">
            <li><a ng-click="cancelChanges(service, ['LimitNanoCPUs', 'LimitMemoryBytes', 'ReservationNanoCPUs', 'ReservationMemoryBytes'])">Reset changes</a></li>
            <li><a ng-click="cancelChanges(service)">Reset all changes</a></li>
          </ul>
        </div>
      </div>
    </rd-widget-footer>
  </rd-widget>
</div>
