<br/>

<uib-tabset>
    <uib-tab heading="{{'Network'|translate}}">
        <br/>

        <div class="form-group">
            <label translate>Hostname</label>
            <div class="input-group">
                <input ng:model="hostname" ng:enter="setHostname(hostname)" class="form-control" />
                <div class="input-group-btn">
                    <a ng:click="setHostname(hostname)" ng:disabled="!hostname" class="btn btn-primary" translate>Update hostname</a>
                </div>
            </div>
        </div>

        <hr/>

        <label translate>Interfaces</label>

        <progress-spinner ng:hide="config != null"></progress-spinner>

        <div class="list-group">
            <div ng:repeat="iface in config" class="list-group-item list-group-item-large">
                <a class="list-group-btn" ng:click="$parent.configuringInterface = iface" title="Configure">
                    <i class="fa fa-cog"></i>
                </a>
                <a class="list-group-btn" ng:click="upInterface(iface)" ng:show="state[iface.name].up === false" title="{{'Activate (up) interface'|translate}}">
                    <i class="fa fa-arrow-up"></i>
                </a>
                <a class="list-group-btn" ng:click="downInterface(iface)" ng:show="state[iface.name].up === true" title="{{'Deactivate (down) interface'|translate}}">
                    <i class="fa fa-arrow-down"></i>
                </a>
                <a class="list-group-btn" ng:click="restartInterface(iface)" ng:show="state[iface.name].up === true" title="{{'Restart interface'|translate}}">
                    <i class="fa fa-refresh"></i>
                </a>
                <div class="list-group-main">
                    <div class="list-group-icon">
                        <i class="fa fa-plug"></i>
                    </div>
                    <h4 class="list-group-item-heading">
                        {{iface.name}}
                    </h4>
                    <p class="list-group-item-text">
                        <span class="label label-success" ng:show="state[iface.name].up === true">
                            <i class="fa fa-fw fa-check"></i> UP
                        </span>
                        <span class="label label-info" ng:show="state[iface.name].address">
                            {{state[iface.name].address}}
                        </span>
                        <span class="label label-warning" ng:show="state[iface.name].up === false">
                            <i class="fa fa-fw fa-warning"></i> DOWN
                        </span>
                        <span class="label label-info" ng:show="!state[iface.name]">
                            <i class="fa fa-circle-o-notch fa-spin"></i> <span translate>Checking status...</span>
                        </span>
                    </p>
                </div>
            </div>
        </div>

        <div class="floating-toolbar-padder"></div>

        <floating-toolbar>
            <!-- ng:click="updateLists()" class="btn btn-default btn-flat" test-bind="updateButton">Update package list</a-->
        </floating-toolbar>

        <dialog ng:show="configuringInterface">
            <div class="modal-header">
                <h4>{{configuringInterface.name}}</h4>
            </div>
            <div class="modal-body scrollable">
                <div class="alert alert-warning" ng:show="!knownFamilies[configuringInterface.family]">
                    <i class="fa fa-warning"></i> <span translate>Unknown family</span> "{{configuringInterface.family}}"
                </div>
                <div class="alert alert-warning" ng:show="knownFamilies[configuringInterface.family].indexOf(configuringInterface.addressing) == -1">
                    <i class="fa fa-warning"></i> <span translate>Unknown addressing</span> "{{configuringInterface.addressing}}"
                </div>

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label translate>Family</label>
                            <select ng:model="configuringInterface.family" class="form-control">
                                <option value="inet">IPv4</option>
                                <option value="inet6">IPv6</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label translate>Addressing</label>
                            <select ng:model="configuringInterface.addressing" ng:options="x as (knownAddressingNames[x] || x) for x in knownFamilies[configuringInterface.family]" class="form-control">
                            </select>
                        </div>
                    </div>
                </div>

                <hr />

                <div ng:show="configuringInterface.addressing == 'static'">
                    <div class="form-group">
                        <label translate>Address</label>
                        <input ng:model="configuringInterface.address" type="text" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label translate>Mask</label>
                        <input ng:model="configuringInterface.mask" type="text" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label translate>Gateway</label>
                        <input ng:model="configuringInterface.gateway" type="text" class="form-control" />
                    </div>
                    <div class="form-group" ng:if="configuringInterface.metric !== undefined">
                        <label translate>Metric</label>
                        <input ng:model="configuringInterface.metric" type="number" class="form-control" />
                    </div>
                </div>

                <div ng:show="configuringInterface.addressing == 'dhcp'">
                    <div class="form-group">
                        <label translate>Client ID</label>
                        <input ng:model="configuringInterface.dhcpClient" type="text" class="form-control" />
                    </div>
                </div>

                <div ng:show="configuringInterface.addressing == 'static' && configuringInterface.family == 'ipv6'">
                    <div class="form-group">
                        <label translate>Scope</label>
                        <select ng:model="configuringInterface.scope" class="form-control">
                            <option>global</option>
                            <option>site</option>
                            <option>link</option>
                            <option>host</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label>MAC</label>
                    <input ng:model="configuringInterface.hwaddress" type="text" class="form-control" />
                </div>
                <div class="form-group" ng:if="configuringInterface.mtu !== undefined">
                    <label>MTU</label>
                    <input ng:model="configuringInterface.mtu" type="number" class="form-control" />
                </div>

                <hr />

                <div ng:if="configuringInterface.up_script !== undefined">
                    <div class="form-group">
                        <label translate>Pre-up script</label>
                        <input ng:model="configuringInterface.pre_up_script" type="text" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label translate>Up script</label>
                        <input ng:model="configuringInterface.up_script" type="text" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label translate>Post-up script</label>
                        <input ng:model="configuringInterface.post_up_script" type="text" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label translate>Pre-down script</label>
                        <input ng:model="configuringInterface.pre_down_script" type="text" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label translate>Down script</label>
                        <input ng:model="configuringInterface.down_script" type="text" class="form-control" />
                    </div>

                    <div class="form-group">
                        <label translate>Post-down script</label>
                        <input ng:model="configuringInterface.post_down_script" type="text" class="form-control" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a ng:click="$parent.configuringInterface = null; save()" class="btn btn-default btn-flat" translate>Save</a>
                <a ng:click="$parent.configuringInterface = null; reload()" class="btn btn-default btn-flat" translate>Close</a>
            </div>
        </dialog>

        <br/>
    </uib-tab>

    <uib-tab heading="{{'DNS'|translate}}">
        <br/>
        <div ng:controller="NetworkDNSController">
            <div class="list-group">
                <div ng:repeat="path in config.match('nameserver')" class="list-group-item list-group-item-small">
                    <a class="list-group-btn" ng:click="config.remove(path)" title="{{'Remove'|translate}}">
                        <i class="fa fa-trash-o"></i>
                    </a>
                    <div class="list-group-main">
                        <i class="fa fa-fw fa-globe"></i> {{config.get(path)}}
                    </div>
                </div>
            </div>

            <div class="alert alert-info" ng:show="config.match('nameserver').length == 0">
                <i class="fa fa-info-circle"></i> <span translate>No nameservers defined</span>
            </div>

            <div class="input-group">
                <input ng:model="newNameserver" ng:enter="addNameserver()" placeholder="{{'DNS server address'|translate}}" class="form-control" />
                <div class="input-group-btn">
                    <a ng:click="addNameserver()" class="btn btn-primary" translate>Add</a>
                </div>
            </div>

            <div class="floating-toolbar-padder"></div>

            <floating-toolbar>
                <a ng:click="save()" class="btn btn-default btn-flat" translate>Save</a>
            </floating-toolbar>
            <br/>
        </div>
    </uib-tab>

    <uib-tab heading="{{'Hosts'|translate}}">
        <br/>
        <div ng:controller="NetworkHostsController">
            <div class="list-group">
                <div ng:repeat="path in config.match('\\d+')" class="list-group-item list-group-item-large">
                    <a class="list-group-btn" ng:click="config.remove(path)" title="{{'Remove'|translate}}">
                        <i class="fa fa-trash-o"></i>
                    </a>
                    <a class="list-group-btn" ng:click="$parent.configuringHostPath = path" title="{{'Configure'|translate}}">
                        <i class="fa fa-cog"></i>
                    </a>
                    <div class="list-group-main">
                        <div class="list-group-icon">
                            <i class="fa fa-fw fa-globe"></i>
                        </div>
                        <h4 class="list-group-item-heading">
                            {{ config.get(path + '/canonical') }}
                        </h4>
                        <p class="list-group-item-text">
                            {{ config.get(path + '/ipaddr') }}
                            &nbsp;
                            <span ng:show="config.match(path + '/alias').length" class="label label-info">
                                +{{config.match(path + '/alias').length}}
                            </span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="alert alert-info" ng:show="config.match('\\d+').length == 0">
                <i class="fa fa-info-circle"></i> <span translate>No hosts defined</span>
            </div>

            <div class="input-group">
                <input ng:model="newHost" ng:enter="addHost()" placeholder="{{'New host name'|translate}}" class="form-control" />
                <div class="input-group-btn">
                    <a ng:click="addHost()" class="btn btn-primary" translate>Add</a>
                </div>
            </div>

            <div class="floating-toolbar-padder"></div>

            <floating-toolbar>
                <a ng:click="save()" class="btn btn-default btn-flat" translate>Save</a>
            </floating-toolbar>

            <dialog ng:show="configuringHostPath">
                <div class="modal-header">
                    <h4>{{config.get(configuringHostPath + '/canonical')}}</h4>
                </div>
                <div class="modal-body scrollable">
                    <div class="form-group">
                        <label translate>Canonical hostname</label>
                        <input
                            ng:model="config.model(configuringHostPath + '/canonical')"
                            ng:model-options="{getterSetter: true}"
                            type="text"
                            class="form-control" />
                    </div>
                    <div class="form-group">
                        <label translate>IP address</label>
                        <input
                            ng:model="config.model(configuringHostPath + '/ipaddr')"
                            ng:model-options="{getterSetter: true}"
                            type="text"
                            class="form-control" />
                    </div>
                    <div class="form-group">
                        <label translate>Aliases</label>
                        <div class="alert alert-info" ng:show="config.match('\\d+').length == 0">
                            <i class="fa fa-info-circle"></i> <span translate>No hosts defined</span>
                        </div>
                        <div class="list-group">
                            <div ng:repeat="path in config.match(configuringHostPath + '/alias')" class="list-group-item list-group-item-small">
                                <a class="list-group-btn" ng:click="config.remove(path)" title="{{'Remove'|translate}}">
                                    <i class="fa fa-trash-o"></i>
                                </a>
                                <div class="list-group-main">
                                    <i class="fa fa-fw fa-tag"></i> {{config.get(path)}}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input ng:model="_.newAlias" ng:enter="addAlias(configuringHostPath)" placeholder="{{'New alias'|translate}}" class="form-control" />
                            <div class="input-group-btn">
                                <a ng:click="addAlias(configuringHostPath)" class="btn btn-primary" translate>Add</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a ng:click="$parent.configuringHostPath = null; save()" class="btn btn-default btn-flat" translate>Save</a>
                    <a ng:click="$parent.configuringHostPath = null" class="btn btn-default btn-flat" translate>Close</a>
                </div>
            </dialog>

            <br/>
        </div>
    </uib-tab>
</uib-tabset>
