<div class="panel" ng-controller="machineDetailsController">
    <h2 translate>Details for machine {{ machineid }} in Machine Resolver
        {{ machineresolver }}
    </h2>

    <div class="panel-body">
        <div class="col-xs-6">
            <div class="form-group">
                <label for="hostname" translate>Hostname</label>

                <div name="hostname">{{ machine.hostname }}</div>
            </div>
            <div class="form-group">
                <label for="id" translate>Machine ID</label>

                <div name="id">{{ machine.id}}</div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="form-group">
                <label for="ip" translate>IP Address</label>

                <div name="ip">{{ machine.ip }}</div>
            </div>
            <div class="form-group">
                <label for="resolver" translate>Machine Resolver</label>

                <div name="resolver">
                    <a ui-sref="machine.list({resolver:machine.resolver_name})">
                    {{ machine.resolver_name }}</a></div>
            </div>
        </div>
    </div>
    <h3 translate>Tokens and Applications for machine {{ machineid }}</h3>

    <pagination ng-show="tokenCount > tokensPerPage"
                total-items="tokenCount" ng-model="params.page"
                items-per-page="{{ tokensPerPage }}"
                max-size="5"
                previous-text="{{ 'Previous'|translate }}"
                next-text="{{ 'Next'|translate }}"
                last-text="{{ 'Last'|translate }}"
                first-text="{{ 'First'|translate }}"
                boundary-links="true" ng-change="pageChanged()"></pagination>

    <div class="table-responsive">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th translate>Serial</th>
                <th translate>Application</th>
                <th translate>Options</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="token in tokendata">
                <td><a ui-sref="token.details({tokenSerial:token.serial,
                        currentToken:token})"
                       ng-click="$rootScope.returnTo=machine.list;">
                    {{ token.serial }}</a> ({{ token.type  }})</td>
                <td>{{ token.application }}</td>
                <td ng-hide="token.optionsEdit">
                    <span ng-repeat="option
                    in Applications[token.application].options.required">
                        <b>{{ option | capitalize }}:</b>
                        {{ token.options[option] }}<br>
                    </span>
                    <span ng-repeat="option
                    in Applications[token.application].options.optional">
                        <b>{{ option | capitalize }}:</b>
                        {{ token.options[option] }}<br>
                    </span>

                </td>
                <td ng-show="token.optionsEdit">
                    <div class="form-group"
                         ng-repeat="option in Applications[token.application].options.required">
                        <label for="option_{{ option }}">{{ option | capitalize }}</label>
                        <input name="option_{{ option }}"
                               ng-model="token.options[option]"
                               class="form-control" ng-required="1"
                               placeholder="required">
                    </div>
                    <div class="form-group"
                         ng-repeat="option in Applications[token.application].options.optional">
                        <label for="option_{{ option }}">{{ option | capitalize }}</label>
                        <input name="option_{{ option }}"
                               ng-model="token.options[option]"
                               class="form-control" placeholder="optional">
                    </div>
                </td>
                <td ng-hide="token.optionsEdit">
                    <button class="btn btn-primary"
                            ng-click="token.optionsEdit=true"
                            translate>Edit Options
                    </button>
                    <button class="btn btn-danger"
                            ng-click="detachMachineToken(token.serial,
                            token.application)" translate>Detach
                    </button>
                </td>
                <td ng-show="token.optionsEdit">
                    <button class="btn btn-primary"
                            ng-click="saveOptions(token.serial,
                            token.application, token.options);
                            token.optionsEdit=false"
                            translate>Save Options
                    </button>
                    <button class="btn btn-danger"
                            ng-click="token.optionsEdit=false"
                            translate>Cancel
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div ng-show="checkRight('manage_machine_tokens')">
    <h3>Attach a new token {{ newToken.serial }}</h3>

    <form name="formAttachToken" role="form" validate>
        <div attach-token new-token-object="newToken"></div>

        <div class="form-group">
            <label for="application" translate>Application</label>
            <select class="form-control"
                id="application"
                ng-model="form.application"
                ng-required="1"
                ng-options="app for app in formInit.application"
                >
        </select>
        </div>
        <!-- Options for a new MachineToken -->
        <div class="form-group"
             ng-repeat="option in Applications[form.application].options.required">
            <label for="option_{{ option }}">{{ option | capitalize }}</label>
            <input name="option_{{ option }}"
                   ng-model="form.options[option]"
                   class="form-control" ng-required="1"
                    placeholder="required">
        </div>
        <div class="form-group"
             ng-repeat="option in Applications[form.application].options.optional">
            <label for="option_{{ option }}">{{ option | capitalize }}</label>
            <input name="option_{{ option }}"
                   ng-model="form.options[option]"
                   class="form-control" placeholder="optional">
        </div>

        <div class="text-center">
            <button ng-click="attachToken()"
                    ng-disabled="formAttachToken.$invalid"
                    class="btn btn-primary" translate>Attach Token
            </button>
        </div>
    </form>
    </div>
</div>
