<div class="modal-body">
    <table class="form-table-ct" ng-if="fields">
        <tr ng-if="haveKubectl">
            <td class="top">
                <label class="control-label" translate>Cluster</label>
            </td>
            <td class="dialog-wrapper">
                <div id="kubernetes-cluster" class="btn-group bootstrap-select form-control" dropdown>
                    <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                        <span class="pull-left" ng-if="currentCluster.name">{{ currentCluster.name }}</span>
                        <span class="pull-left" ng-if="!currentCluster.name" translate>Add New Cluster</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li ng-repeat="cluster in clusters" ng-class="{ checked: currentCluster.name == cluster.name }">
                            <a ng-click="selectCluster(cluster)">{{cluster.name}}</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li ng-class="{ checked: !currentCluster.name }">
                            <a ng-click="selectCluster()" translate>Add New Cluster</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>

        <tr>
            <td class="top">
                <label class="control-label" for="kubernetes-address"
                    translate>Address</label>
            </td>
            <td>
                <input id="kubernetes-address" class="form-control" type="text"
                    ng-model="fields.address" placeholder="eg: https://localhost:6443">
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <label>
                    <input id="kubernetes-skip-verify" type="checkbox" ng-model="fields.skipVerify">
                    <span translate>Skip Certificate Verification</span>
                </label>
            </td>
        </tr>

        <tr >
            <td class="top">
            </td>
            <td>
                <label>
                    <input id="kubernetes-requires-auth" type="checkbox" ng-checked="useAuth" ng-click="toggleAuth()">
                    <span translate>Requires Authentication</span>
                </label>
            </td>
        </tr>

        <tr ng-if="haveKubectl && useAuth">
            <td class="top">
                <label class="control-label" translate>User</label>
            </td>
            <td class="dialog-wrapper">
                <div id="kubernetes-user" class="btn-group bootstrap-select form-control" dropdown>
                    <button class="btn btn-default dropdown-toggle" type="button" dropdown-toggle>
                        <span class="pull-left" ng-if="currentUser.name">{{ currentUser.name }}</span>
                        <span class="pull-left" ng-if="!currentUser.name" translate>Add New User</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li ng-repeat="user in users" ng-class="{ checked: currentUser.name == user.name }">
                            <a ng-click="selectUser(user)">{{user.name}}</a>
                        </li>
                        <li role="separator" class="divider"></li>
                        <li ng-class="{ checked: !currentUser.name }">
                            <a ng-click="selectUser()" translate>Add New User</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>

        <tr ng-if="useAuth && hasCert(currentUser)">
            <td class="top">
                <label class="control-label" translate>Authentication</label>
            </td>
            <td>
                <span translate>Client Certificate</span>
            </td>
        </tr>

        <tr ng-if="useAuth && (!currentUser || currentUser.user.username)">
            <td class="top">
                <label class="control-label" for="kubernetes-username"
                    translate>Username</label>
            </td>
            <td>
                <input id="kubernetes-username" class="form-control" type="text"
                    ng-model="fields.username">
            </td>
        </tr>

        <tr ng-if="useAuth && (!currentUser || currentUser.user.username)">
            <td class="top">
                <label class="control-label" for="kubernetes-password"
                    translate>Password</label>
            </td>
            <td>
                <input id="kubernetes-password" class="form-control" type="password"
                    ng-model="fields.password">
            </td>
        </tr>

        <tr ng-if="useAuth && currentUser.user.token">
            <td class="top">
                <label class="control-label" for="kubernetes-token"
                    translate>Token</label>
            </td>
            <td>
                <input id="kubernetes-token" class="form-control" type="text"
                    ng-model="fields.token">
            </td>
        </tr>
    </table>
</div>

<div class="modal-footer">
    <button class="btn btn-default btn-cancel" ng-click="$dismiss()" translate>Cancel</button>
    <button ng-if="error.problem != 'untrusted-host'" class="btn btn-primary" ng-click="complete(update())">
        <span translate>Connect</span>
    </button>
</div>
