<loading-panel ng-if="loading"></loading-panel>
<div ng-if="!loading">
    <heading-bar heading="Network">
        <dropdown ctxt-obj="paginator.limiter"></dropdown>
        <paginator pager="paginator.pager"></paginator>

        <button
            class="btn btn-success"
            data-toggle="modal"
            data-target="#createNetworkModal"
            ng-if="admin"
        >Create Network</button>
    </heading-bar>

    <nsot-modal title="Create Network" modal-id="createNetworkModal" modal-size="large">
        <div class="modal-body">
            <div ng-if="error" class="alert alert-danger">
                [[error.code]] - [[error.message]]
            </div>
            <form novalidate name="networkForm" class="nsot-form">
                <div ng-include="formUrl"></div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
            </button>
            <button type="submit" ng-click="createNetwork()"
                    class="btn btn-primary" ng-disabled="networkForm.$invalid"
            >
                Create
            </button>
        </div>
    </nsot-modal>


    <div class="row"><div class="col-sm-10 col-sm-offset-1">
<div class="adv-buttons">

            <button class="btn btn-default"
                    ng-click="filters.root_only = !filters.root_only"
                    ng-class="{active: filters.root_only}"
            >Root Only</button>
            <div class="btn-group" role="group">
                <button class="btn btn-default"
                        ng-click="filters.include_networks = !filters.include_networks"
                        ng-class="{active: filters.include_networks}"
                >Networks</button>
                <button class="btn btn-default"
                        ng-click="filters.include_ips = !filters.include_ips"
                        ng-class="{active: filters.include_ips}"
                >IPs</button>
            </div>
            <div class="btn-group">
                <select name="ip_version"
                        class="form-control"
                        ng-model="selectedVersion"
                        ng-change="filters.ip_version = selectedVersion"
                        ng-options="selectedVersion for selectedVersion in ip_versions"
                        ng-init='selectedVersion = filters.ip_version'
                    >
                    <option value="" disabled>IP Version</option>
                    {{selectedVersion}}
                </select>
            </div>
            <div class="btn-group">
                <select name="state"
                        class="form-control"
                        ng-model="selectedState"
                        ng-change="filters.state = selectedState"
                        ng-options="selectedState for selectedState in states"
                        ng-init='selectedState = filters.state'
                    >
                    <option value="" disabled>State</option>
                    {{selectedState}}
                </select>
            </div>
        <form style="display: inline;" method="get" action="">
            <input type="hidden" name="root_only" ng-value="filters.root_only">
            <input type="hidden" name="include_ips" ng-value="filters.include_ips">
            <input type="hidden" name="include_networks" ng-value="filters.include_networks">
            <input type="hidden" name="ip_version" ng-value="filters.ip_version">
            <input type="hidden" name="state" ng-value="filters.state">
            <input type="submit" class="btn btn-primary" value="Update Filters">
        </form>

    </div></div></div>

    <div class="row"><div class="col-sm-10 col-sm-offset-1">
        <panel>
            <panel-heading>Networks</panel-heading>
            <panel-body ng-if="!networks.length" class="text-center">
                No Networks
            </panel-body>
            <panel-body ng-if="networks.length">
                <table class="table table-condensed table-hover">
                    <thead>
                        <tr>
                            <th class="col-sm-1">Network Address</th>
                            <th class="col-sm-1">Prefix Length</th>
                            <th class="col-sm-1">IP Version</th>
                            <th class="col-sm-1">State</th>
                            <th class="col-sm-1">IP Address</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="network in networks">
                            <td>
                                <a href="/sites/[[siteId]]/networks/[[network.id]]">
                                    [[network.network_address]]
                                </a>
                            </td>
                            <td>
                                <a href="/sites/[[siteId]]/networks/?prefix_length=[[network.prefix_length]]">
                                    [[network.prefix_length]]
                                </a>
                            </td>
                            <td>
                                <a href="/sites/[[siteId]]/networks/?ip_version=[[network.ip_version]]">
                                    [[network.ip_version]]
                                </a>
                            </td>
                            <td>
                                <a href="/sites/[[siteId]]/networks/?state=[[network.state]]">
                                    [[network.state]]
                                </a>
                            </td>
                            <td>
                                <i ng-if="network.is_ip" class="fa fa-check"></i>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </panel-body>
        </panel>

    </div></div>


</div>
