<div class="card mb-3">
    <div class="card-header">
        <h4>Configuration settings</h4>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <td style="width: 50%"><b>Dashboard link</b></td>
                    <td><a href="/{{ details.link }}/overview">/{{ details.link }}</a></td>
                </tr>
                <tr>
                    <td><b>Measurements database</b></td>
                    <td>{{ config.database_name }}</td>
                </tr>
                <tr>
                    <td><b>Collecting outlier data?</b></td>
                    <td ng-show="config.outlier_detection_constant > 0">Yes, with outlier_detection_constant
                        = {{ config.outlier_detection_constant }}
                    </td>
                    <td ng-show="config.outlier_detection_constant == 0">No</td>
                </tr>
                <tr>
                    <td><b>Custom endpoint colors</b></td>
                    <td>
                        <ul>
                            <li ng-repeat="(key, value) in config.colors">{{ key + ': ' + value }}</li>
                        </ul>
                    </td>
                </tr>
                <tr>
                    <td><b>User specified timezone</b></td>
                    <td>{{ config.timezone }}</td>
                </tr>
                <tr>
                    <td><b>Telemetry data consent</b></td>
                    <td>
                        <div>
                            <input type="radio" ng-model="telemetryConsent" value="true"
                                   ng-change="handleTelemetry(true)"> Agree
                            <input type="radio" ng-model="telemetryConsent" value="false"
                                   ng-change="handleTelemetry(false)"> Decline
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<modal name="'delete'" title="'Delete user'">
    <p>Are you sure that you want to delete user <strong>{{ user.username }}</strong>?</p>
</modal>

<modal name="'create'" title="'Create new user'" no="'Cancel'" yes="'Create'">
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="create-username">Username</label>
        <div class="col-md-8">
            <input type="text" id="create-username" class="form-control" required/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="create-pwd">Password</label>
        <div class="col-md-8">
            <input type="password" id="create-pwd" class="form-control" required/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="create-pwd2">Confirm password</label>
        <div class="col-md-8">
            <input type="password" id="create-pwd2" class="form-control" required/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="create-admin">Admin</label>
        <div class="col-md-8">
            <input type="checkbox" id="create-admin" class="form-control"/>
        </div>
    </div>
</modal>

<modal name="'edit'" title="'Edit user'" no="'Cancel'" yes="'Update'">
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="edit-username">Username</label>
        <div class="col-md-8">
            <input type="text" id="edit-username" class="form-control" value="{{ user.username }}" disabled required/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="edit-old-pwd">Old password</label>
        <div class="col-md-8">
            <input type="password" id="edit-old-pwd" class="form-control" required/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="edit-new-pwd">New password</label>
        <div class="col-md-8">
            <input type="password" id="edit-new-pwd" class="form-control" required/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="edit-new-pwd2">Confirm new password</label>
        <div class="col-md-8">
            <input type="password" id="edit-new-pwd2" class="form-control" required/>
        </div>
    </div>
    <div class="form-group row">
        <label class="col-md-4 col-form-label text-md-right" for="edit-admin">Admin</label>
        <div class="col-md-8">
            <input type="checkbox" id="edit-admin" class="form-control" ng-model="user.is_admin"/>
        </div>
    </div>
</modal>

<div class="card mb-3" ng-show="userData.length > 0">
    <div class="card-header">
        <h4>User management</h4>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <td><b>ID</b></td>
                    <td><b>Username</b></td>
                    <td><b>Admin*</b></td>
                    <td><b>Edit</b></td>
                    <td><b>Delete</b></td>
                </tr>
                <tr ng-repeat="user in userData">
                    <td>{{ user.id }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.is_admin ? 'Yes' : 'No' }}</td>
                    <td>
                        <button class="btn btn-primary" ng-click="openModal('edit', user)">Edit</button>
                    </td>
                    <td>
                        <button class="btn btn-primary" ng-click="openModal('delete', user)">Delete</button>
                    </td>
                </tr>
            </table>
            <button class="btn btn-primary" ng-click="openModal('create', null)">Create new user</button>
        </div>
    </div>
</div>

<div class="card mb-3" ng-show="userData.length > 0">
    <div class="card-header">
        <h5><sup>*</sup>Admin</h5>
    </div>
    <div class="card-body">
        Non-admins can <strong>only display</strong> the collected data in all the graphs.
        Admins can display this data as well. Additionally, they have the following permissions:
        <ul>
            <li>Admins can set the monitoring rules.</li>
            <li>Admins can create/edit/delete users.</li>
        </ul>
    </div>
</div>

<div class="card mb-3">
    <div class="card-header">
        <h4>Deployment details</h4>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-hover">
                <tr>
                    <td style="width: 50%"><b>Currently deployed version</b></td>
                    <td>{{ details['config-version'] }}</td>
                </tr>
                <tr>
                    <td><b>First request in the currently deployed version</b></td>
                    <td>{{ details['first-request-version'] | dateLayout }}</td>
                </tr>
                <tr>
                    <td><b>Monitoring Dashboard version</b></td>
                    <td>{{ details['dashboard-version'] }}</td>
                </tr>
                <tr>
                    <td><b>First request since using the Monitoring Dashboard</b></td>
                    <td>{{ details['first-request'] | dateLayout }}</td>
                </tr>
                <tr>
                    <td><b>Total amount of monitored requests</b></td>
                    <td>{{ details['total-requests'] | number }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>