<div class="row">
    <div class="col-lg-8 col-lg-offset-2">
        <rd-widget>
            <rd-widget-header icon="fa-tasks" title="Docker Registry Configuration">
            </rd-widget-header>
            <rd-widget-body loading="loadingState.registry.enabled">
                <p>
                    Setting up Docker Registry is <b>only required</b> if you plan to run your Captain on a cluster.
                    For single
                    node Captain deployments,
                    Docker Registry is not recommended as it makes deployment significantly slower.
                </p>
                <p>
                    Captain provides two
                    methods for you to setup your docker registry:
                </p>
                <ul>
                    <li style="margin-bottom: 10px"><b>Self hosted Docker Registry:</b> This is the simplest way to
                        setup a docker registry. Captain creates an instance of
                        Docker Registry on the main machine and it manages the registry for you. However, it has its own
                        limitation. If your main machine is destroyed, your local
                        images will be lost. In most cases, this is not a disaster as you can re-deploy your apps from
                        your source code.
                    </li>
                    <li style="margin-bottom: 20px"><b>Remote Docker Registry:</b> This approach relies on a remote
                        service to act as your Docker Registry. Using this approach,
                        you'll have a more reliable cluster, assuming the third party service you use is reliable! There
                        are multiple private
                        Docker Registry services available: Google Container Registry, Amazon EC2 Container Registry,
                        Quay and etc. Note that
                        this approach costs you money.
                    </li>
                </ul>
                <p><i>You can switch between the two approaches, but you'll have to re-deploy your apps to Captain again
                    such that your images get created on your new Docker Registry. Unless you lost access to the source
                    code, this is a relatively easy task.</i></p>
                <div ng-show="!!captaininfo.dockerRegistryDomain">
                    <hr>
                    <br>
                    <p><b>Current Docker Registry:</b> {{captaininfo.isRegistryLocal?'Local at ':'Remote at'}} <u>
                        {{captaininfo.dockerRegistryDomain}}</u></p>
                    <br>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <hr>
                        <h5>Self Hosted Registry</h5>
                        <br>
                        <button type="button" ng-disabled="captaininfo.isRegistryLocal" ng-click="onLocalRegistryClicked()" class="btn btn-primary">Enable Self Hosted Registry
                        </button>
                    </div>
                    <div class="col-md-6">
                        <hr>
                        <h5>Remote Registry</h5>
                        <br>
                        <form>
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="registryDomain">Registry Domain</label>
                                        <input type="text" class="form-control" id="registryDomain" placeholder="captainroot.example.com" ng-model="remote.domain">
                                    </div>
                                    <div class="form-group">
                                        <label for="registryUsername">Registry Username</label>
                                        <input type="text" class="form-control" id="registryUsername" placeholder="myusername" ng-model="remote.username">
                                    </div>
                                    <div class="form-group">
                                        <label for="registryPassword">Registry Password</label>
                                        <input type="password" class="form-control" id="registryPassword" placeholder="password" ng-model="remote.password">
                                    </div>
                                    <button type="button" ng-click="onRemoteRegistryClicked()" class="btn btn-primary">
                                        Connect to Remote Registry
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </rd-widget-body>
        </rd-widget>
    </div>
</div>


<div class="row">
    <div class="col-md-8 col-md-offset-2">

        <rd-widget>
            <rd-widget-header icon="fa-link" title="Attach a New Node">
            </rd-widget-header>
            <rd-widget-body loading="loadingState.nodes.enabled">

                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="inputFirstName">Remote IP Address (as seen by Captain)</label>
                            <input type="text" class="form-control" id="inputFirstName" placeholder="Remote IP Address" ng-model="nodeToAdd.remoteNodeIpAddress">
                        </div>
                    </div>
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label for="inputLastName">Remote Username</label>
                            <input type="text" class="form-control" id="inputLastName" ng-model="nodeToAdd.remoteUserName">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group">
                            <label for="inputFirstName">Captain IP Address (as seen by remote)</label>
                            <input type="text" class="form-control" ng-model="nodeToAdd.captainIpAddress" id="captainIpAddress" placeholder="Captain IP Address">
                        </div>
                    </div>
                    <div class="col-sm-5 col-sm-offset-1">
                        <div class="form-group">
                            <label for="inputWebsite">Node Type</label>
                            <input type="text" class="form-control" ng-model="nodeToAdd.nodeType" id="inputWebsite" placeholder="worker/manager">
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="textarea01">SSH Private Key</label>
                            <textarea style="font-family: monospace" ng-model="nodeToAdd.privateKey" placeholder="-----BEGIN RSA PRIVATE KEY-----&#10;MIICWwIBAAKBgQDArfs81aizq8ckg16e+ewFgJg7J..." class="form-control" id="textarea01"></textarea>
                        </div>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-11">
                        <div class="pull-right">
                            <button type="submit" ng-click="onAddNodeClicked()" class="btn btn-primary">Join Cluster
                            </button>
                        </div>
                    </div>
                </div>

            </rd-widget-body>
        </rd-widget>
    </div>
</div>

<br>
<hr>
<br>

<div ng-repeat="node in allNodes">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <rd-widget>
                <rd-widget-header icon="fa-server" title="{{node.ip}} {{node.state=='down'?'** DOWN **':''}}">
                </rd-widget-header>
                <rd-widget-body loading="loadingState.nodes.enabled">
                    <div class="row">

                        <div class="col-md-7">
                            <p><b>Hostname:</b> {{node.hostname}} </p>
                            <p><b>ID:</b> {{node.nodeId}} </p>
                            <p><b>Type:</b> {{node.isLeader?'Leader':node.type}} </p>
                            <p><b>Docker Engine:</b> {{node.dockerEngineVersion}} </p>
                        </div>
                        <div class="col-md-5">
                            <p><b>OS:</b> {{node.operatingSystem}} </p>
                            <p><b>Architecture:</b> {{node.architecture}} </p>
                            <p><b>CPU Cores:</b> {{node.nanoCpu/1e9}} </p>
                            <p><b>Memory:</b> {{node.memoryBytes/1024/1024/1024| number:2}} GB </p>
                        </div>

                    </div>
                </rd-widget-body>
            </rd-widget>

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