<div class="container">
    <div class="row">
        <div class="col-md-6 right-border">
            <div class="row">
                <h4>{{ 'admin.database'|translate|ftitlecase }}:</h4>

                <div class="table-responsive ms-3 pe-5">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>{{ 'property'|translate|ftitlecase }}</th>
                                <th>{{ 'value'|translate|ftitlecase }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngIf="db && db.migrations_ran">
                                <td>{{ 'admin.installed_migrations'|translate|ftitlecase }}</td>
                                <td [class.text-bg-danger]="db.migrations_pending > 0">
                                    {{ db.migrations_ran }}/{{ db.migrations_ran+db.migrations_pending }}
                                </td>
                            </tr>
                            <tr *ngIf="db && db.platform.open_connections">
                                <td>{{ 'admin.open_connections'|translate|ftitlecase }}</td>
                                <td>{{ db.platform.open_connections }}</td>
                            </tr>
                            <tr *ngIf="db && db.global_size">
                                <td>{{ 'size'|translate|ftitlecase }}</td>
                                <td>{{ sizeToHuman(db.global_size) }}</td>
                            </tr>
                            <tr *ngIf="db && db.platform.name">
                                <td>{{ 'admin.db_engine_name'|translate|ftitlecase }}</td>
                                <td>{{ db.platform.name }}</td>
                            </tr>
                            <tr *ngIf="db && db.platform.config.database">
                                <td>{{ 'admin.database'|translate|ftitlecase }}</td>
                                <td>{{ db.platform.config.database }}</td>
                            </tr>
                            <tr *ngIf="db && db.platform.config.host">
                                <td>{{ 'admin.host'|translate|ftitlecase }}</td>
                                <td>{{ db.platform.config.host }}</td>
                            </tr>
                            <tr *ngIf="db && db.platform.config.port">
                                <td>{{ 'admin.port'|translate|ftitlecase }}</td>
                                <td>{{ db.platform.config.port }}</td>
                            </tr>
                            <tr *ngIf="db && db.platform.config.username">
                                <td>{{ 'username'|translate|ftitlecase }}</td>
                                <td>{{ db.platform.config.username }}</td>
                            </tr>
                            <tr *ngIf="db && db.platform.config.charset">
                                <td>{{ 'admin.charset'|translate|ftitlecase }}</td>
                                <td>{{ db.platform.config.charset }}</td>
                            </tr>
                            <tr *ngIf="db && db.platform.config.prefix">
                                <td>{{ 'admin.prefix'|translate|ftitlecase }}</td>
                                <td>{{ db.platform.config.prefix }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="btn-group-vertical mb-3 ms-3 mt-2 pe-5 ps-5" *ngIf="db && db.migrations_pending >= 0">
                    <p class="btn-group-label">{{ 'admin.operations'|translate|ftitlecase }}</p>
                    <button type="button" class="btn btn-lg" (click)="runMigrations()"
                      [ngClass]="{'blink': db.migrations_pending > 0, 'btn-success': db.migrations_pending > 0, 'btn-primary': db.migrations_pending <= 0}">{{ 'admin.run_migrations'|translate|ftitlecase }}</button>
                    <button type="button" class="btn btn-lg btn-danger" (click)="runSeeding()">{{ 'admin.run_seeding'|translate|ftitlecase }}</button>
                </div>

                <div class="mb-2 ms-3 ps-5 pe-5" *ngIf="db && db.tables">
                    <button type="button" class="btn btn-primary" (click)="isTableListCollaped = !isTableListCollaped"
                        [attr.aria-expanded]="!isTableListCollaped" aria-controls="collapseBasic">
                        <ng-container *ngIf="isTableListCollaped">{{ 'admin.show_tables'|translate|ftitlecase }}</ng-container>
                        <ng-container *ngIf="!isTableListCollaped">{{ 'admin.hide_tables'|translate|ftitlecase }}</ng-container>
                    </button>
                </div>
                <div class="table-responsive ms-3 pe-5" *ngIf="db && db.tables" [collapse]="isTableListCollaped">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>{{ 'admin.table'|translate|ftitlecase }}</th>
                                <th>{{ 'size'|translate|ftitlecase }}</th>
                                <th>{{ 'admin.rows'|translate|ftitlecase }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let row of db.tables">
                                <td>{{ row.table }}</td>
                                <td>{{ sizeToHuman(row.size) }}</td>
                                <td>{{ row.rows }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <hr>
            <div class="row">
                <h4>{{ 'admin.operations'|translate|ftitlecase }}:</h4>

                <div class="table-responsive ms-3 pe-5">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>{{ 'name'|translate|ftitlecase }}</th>
                                <th>{{ 'admin.manual_execution'|translate|ftitlecase }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let job of jobs">
                                <td>{{ job }}</td>
                                <td (click)="runJob(job)" class="cursor-pointer text-center"
                                  [ngClass]="{'text-bg-danger': ultraDangerousJobs.includes(job), 'text-bg-warning': dangerousJobs.includes(job)}">
                                    <i class="fas fa-play"></i> {{ 'admin.run'|translate|ftitlecase }}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="row">
                <h4>{{ 'admin.updates_and_maintenance_title'|translate }}</h4>

                <div class="btn-group-vertical mt-2 ps-5 pe-5">
                    <p class="btn-group-label">{{ 'maintenance_mode'|translate|ftitlecase }}</p>
                    <button type="button" class="btn btn-lg btn-danger" (click)="updateMaintenanceMode(true)" [disabled]="isMaintenanceModeActive">{{ 'enable'|translate|ftitlecase }}</button>
                    <button type="button" class="btn btn-lg btn-warning" (click)="updateMaintenanceMode(false)" [disabled]="!isMaintenanceModeActive">{{ 'disable'|translate|ftitlecase }}</button>
                </div>

                <div class="btn-group-vertical mt-2 ps-5 pe-5">
                    <p class="btn-group-label">{{ 'admin.optimization'|translate|ftitlecase }}</p>
                    <button type="button" class="btn btn-lg btn-primary" (click)="runOptimization()">{{ 'admin.run_optimization'|translate|ftitlecase }}</button>
                    <button type="button" class="btn btn-lg btn-danger" (click)="clearOptimization()">{{ 'admin.clear_optimization'|translate|ftitlecase }}</button>
                    <button type="button" class="btn btn-lg btn-warning" (click)="clearCache()">{{ 'admin.clear_cache'|translate|ftitlecase }}</button>
                </div>

                <div class="btn-group-vertical mt-2 ps-5 pe-5">
                    <p class="btn-group-label">{{ 'admin.env_operations'|translate|ftitlecase }}</p>
                    <button type="button" class="btn btn-lg btn-primary" (click)="envEncrypt()">{{ 'admin.env_encrypt'|translate|ftitlecase }}</button>
                    <button type="button" class="btn btn-lg btn-warning" (click)="envDecrypt()">{{ 'admin.env_decrypt'|translate|ftitlecase }}</button>
                    <button type="button" class="btn btn-lg btn-danger" (click)="envDelete()">{{ 'admin.env_delete'|translate|ftitlecase }}</button>
                </div>
            </div>
            <hr>
            <div class="row">
                <h4>{{ 'admin.telegram_bot'|translate }}</h4>

                <div class="table-responsive ms-3 pe-5">
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>{{ 'property'|translate|ftitlecase }}</th>
                                <th>{{ 'value'|translate|ftitlecase }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let info of telegramBotInfoArray">
                                <td>{{ info[0] }}</td>
                                <td>{{ info[1] }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="btn-group-vertical mt-2 ps-5 pe-5">
                    <p class="btn-group-label">{{ 'admin.telegram_webhook'|translate }}</p>
                    <button type="button" class="btn btn-lg btn-danger" (click)="setTelegramBotWebhook()">{{ 'admin.telegram_webhook_set'|translate|ftitlecase }}</button>
                    <button type="button" class="btn btn-lg btn-warning" (click)="unsetTelegramBotWebhook()">{{ 'admin.telegram_webhook_unset'|translate|ftitlecase }}</button>
                </div>
            </div>
        </div>
    </div>
</div>
