<div class="datatable">
  <rd-widget>
    <rd-widget-header icon="{{ $ctrl.titleIcon }}" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
    <rd-widget-body classes="no-padding">
      <div class="actionBar">
        <form class="form-horizontal">
          <div class="row" authorization="DockerNetworkConnect">
            <label for="container_network" class="col-sm-3 col-lg-2 control-label text-left">Join a network</label>
            <div class="col-sm-5 col-lg-4">
              <select class="form-control" ng-model="$ctrl.selectedNetwork" id="container_network">
                <option selected disabled hidden value="">Select a network</option>
                <option ng-repeat="net in $ctrl.availableNetworks | orderBy: 'Name'" ng-value="net.Id">{{ net.Name }}</option>
              </select>
            </div>
            <div class="col-sm-1">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="$ctrl.joinNetworkActionInProgress || !$ctrl.selectedNetwork"
                ng-click="$ctrl.joinNetworkAction($ctrl.container, $ctrl.selectedNetwork)"
                button-spinner="$ctrl.joinNetworkActionInProgress"
              >
                <span ng-hide="$ctrl.joinNetworkActionInProgress">Join network</span>
                <span ng-show="$ctrl.joinNetworkActionInProgress">Joining network...</span>
              </button>
            </div>
          </div>
        </form>
      </div>
      <div class="table-responsive">
        <table class="table-hover nowrap-cells table">
          <thead>
            <tr>
              <th>Network</th>
              <th>
                IP Address
                <a ng-click="$ctrl.expandAll()" ng-if="$ctrl.hasExpandableItems()">
                  <pr-icon ng-if="$ctrl.state.expandAll" icon="'chevron-down'"></pr-icon>
                  <pr-icon ng-if="!$ctrl.state.expandAll" icon="'chevron-right'"></pr-icon>
                </a>
              </th>
              <th>Gateway</th>
              <th>MAC Address</th>
              <th authorization="DockerNetworkDisconnect">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr
              dir-paginate-start="(key, value) in $ctrl.dataset | itemsPerPage: $ctrl.state.paginatedItemLimit"
              ng-class="{ active: item.Checked }"
              ng-click="$ctrl.expandItem(value, !value.Expanded)"
            >
              <td>
                <button class="btn btn-none" ng-if="$ctrl.itemCanExpand(value)" type="button">
                  <pr-icon ng-if="value.Expanded" icon="'chevron-down'" class-name="'mr-1'"></pr-icon>
                  <pr-icon ng-if="!value.Expanded" icon="'chevron-right'" class-name="'mr-1'"></pr-icon>
                </button>
                <a ui-sref="docker.networks.network({ id: key, nodeName: $ctrl.nodeName })">{{ key }}</a>
              </td>
              <td>{{ value.IPAddress || '-' }}</td>
              <td>{{ value.Gateway || '-' }}</td>
              <td>{{ value.MacAddress || '-' }}</td>
              <td authorization="DockerNetworkDisconnect">
                <button
                  type="button"
                  class="btn btn-xs btn-dangerlight vertical-center !ml-0 h-fit"
                  ng-disabled="$ctrl.leaveNetworkActionInProgress || $ctrl.container.IsPortainer"
                  button-spinner="$ctrl.leaveNetworkActionInProgress"
                  ng-click="$ctrl.leaveNetworkAction($ctrl.container, key)"
                >
                  <span ng-if="!$ctrl.leaveNetworkActionInProgress" class="vertical-center !ml-0"> <pr-icon icon="'trash-2'"></pr-icon> Leave network</span>
                  <span ng-if="$ctrl.leaveNetworkActionInProgress">Leaving network...</span>
                </button>
              </td>
            </tr>
            <tr
              dir-paginate-end
              ng-show="$ctrl.itemCanExpand(value) && value.Expanded"
              ng-class="{ 'datatable-highlighted': value.Highlighted, 'datatable-unhighlighted': !value.Highlighted }"
            >
              <td colspan="1"></td>
              <td colspan="1">
                {{ value.GlobalIPv6Address }}
              </td>
              <td colspan="3">
                {{ value.IPv6Gateway || '-' }}
              </td>
            </tr>
            <tr ng-if="!$ctrl.dataset">
              <td colspan="5" class="text-muted text-center">Loading...</td>
            </tr>
            <tr ng-if="$ctrl.dataset.length === 0">
              <td colspan="5" class="text-muted text-center">No network available.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="footer" ng-if="$ctrl.dataset">
        <div class="paginationControls">
          <form class="form-inline">
            <span class="limitSelector vertical-center">
              <span style="margin-right: 5px"> Items per page </span>
              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
                <option value="0">All</option>
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
              </select>
            </span>
            <dir-pagination-controls max-size="5"></dir-pagination-controls>
          </form>
        </div>
      </div>
    </rd-widget-body>
  </rd-widget>
</div>