<div>
<!-- Alejandro Galue (agalue@opennms.org) -->

<ol class="breadcrumb">
  <li class="breadcrumb-item"><a href="/opennms/index.jsp">Home</a></li>
  <li class="breadcrumb-item"><a href="/opennms/admin/index.jsp">Admin</a></li>
  <li class="breadcrumb-item"><a href="" ng-click="goTop()">Provisioning Requisitions</a></li>
  <li class="breadcrumb-item"><a href="" ng-click="goBack()">{{ foreignSource }}</a></li>
  <li class="breadcrumb-item active">{{ node.nodeLabel }}</li>
</ol>

<form name="nodeForm" novalidate>

<!-- Toolbar -->

<div class="row">
  <div class="col-md-6">
    <h4>Node {{ node.nodeLabel }} at {{ foreignSource }}</h4>
  </div>
  <div class="col-md-6">
    <div class="my-4 pull-right">
      <button type="button" class="btn btn-secondary" id="go-horizontal" ng-click="goHorizontalLayout()">
        <span class="fas fa-align-justify"></span> Use Horizontal Layout
      </button>
      <button type="button" class="btn btn-primary" id="save-node" ng-click="save()" ng-show="nodeForm.$dirty" ng-disabled="nodeForm.$invalid || timingStatus.isRunning">
        <span class="fas fa-floppy-disk"></span> Save
      </button>
      <button type="button" class="btn btn-secondary" uib-tooltip="Delete the current Node" ng-click="deleteNode(node)">
        <span class="fas fa-trash-can"></span> Delete
      </button>
      <button type="button" class="btn btn-secondary" id="go-back" ng-click="goBack()">
        <i class="fas fa-reply" aria-hidden="true"></i> Return
      </button>
    </div>
  </div>
</div>

<!-- Content -->


  <div class="row">
    <!-- Basic Information Tab -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <span>Basic Information</span>
        </div>
        <div class="card-body" ng-include="nodeBasicView"></div>
      </div>
    </div>
    <!-- Path Outage Tab -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <span>Path Outage</span>
        </div>
        <div class="card-body" ng-include="nodePathoutagesView"></div>
      </div>
    </div>
  </div> <!-- row -->

  <div class="row">
    <!-- Interfaces Tab -->
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <span>IP Interfaces</span>
        </div>
        <div class="card-body" ng-include="nodeInterfacesView"></div>
      </div>
    </div>
  </div> <!-- row -->


  <!-- Meta-Data Panel -->
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <span>Meta-Data</span>
        </div>
        <div class="card-body" ng-include="nodeMetaDataView"></div>
      </div>
    </div>
  </div>

  <div class="row">
    <!-- Assets Tab -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <span>Assets</span>
        </div>
        <div class="card-body" ng-include="nodeAssetsView"></div>
      </div>
    </div>
    <!-- Categories Tab -->
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <span>Categories</span>
        </div>
        <div class="card-body" ng-include="nodeCategoriesView"></div>
      </div>
    </div>
  </div> <!-- row -->


</form>

</div>
