<div class="row">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <rd-widget>
      <rd-widget-header icon="code" title-text="Node Details"></rd-widget-header>
      <rd-widget-body classes="no-padding">
        <table class="table">
          <tbody>
            <tr ng-if="$ctrl.details.name">
              <td>Node name</td>
              <td>{{ $ctrl.details.name }}</td>
            </tr>
            <tr>
              <td>Role</td>
              <td>{{ $ctrl.details.role }} {{ $ctrl.state.managerAddress }}</td>
            </tr>
            <tr>
              <td>Availability</td>
              <td>
                <node-availability-select
                  on-save="$ctrl.updateNodeAvailability(availability)"
                  availability="$ctrl.details.availability"
                  original-value="$ctrl.details.availability"
                >
                </node-availability-select>
              </td>
            </tr>
            <tr>
              <td>Status</td>
              <td
                ><span class="label label-{{ $ctrl.details.status | nodestatusbadge }}">{{ $ctrl.details.status }}</span></td
              >
            </tr>
            <tr>
              <td>
                <div class="nopadding">
                  <a class="btn btn-secondary btn-sm pull-right" ng-click="$ctrl.addLabel(node)"> <pr-icon icon="'plus'"></pr-icon> label </a>
                </div>
                Node Labels
              </td>
              <td></td>
            </tr>
            <tr>
              <td colspan="2">
                <node-labels-table labels="$ctrl.details.nodeLabels" on-changed-labels="$ctrl.updateNodeLabels(labels)"></node-labels-table>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <div class="btn-toolbar" role="toolbar">
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary btn-sm" ng-disabled="!$ctrl.state.hasChanges" ng-click="$ctrl.saveChanges()"> Apply changes </button>
                    <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a ng-click="$ctrl.cancelChanges()">Reset changes</a></li>
                    </ul>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
