{% extends "base.html" %}
{% load i18n %}
{% block title %}{% translate "MySQL Databases" %} - Eenos{% endblock %}
{% block content %}
<div class="eenos-page-header flex-wrap gap-3"><div><h1 class="eenos-page-title">{% translate "MySQL Databases" %}</h1><div class="eenos-page-subtitle">{% translate "Manage databases and their assigned users." %}</div></div><div class="col-12 col-sm-auto d-flex flex-column flex-sm-row gap-2"><a href="{% url 'mysql_add_db' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2"><i data-lucide="database-zap"></i>{% translate "Create Database" %}</a><a href="{% url 'mysql_add_user' %}" class="btn btn-outline-primary d-flex align-items-center justify-content-center gap-2"><i data-lucide="user-round-plus"></i>{% translate "Create MySQL User" %}</a><a href="{% url 'mysql_add_user_to_db' %}" class="btn btn-outline-secondary d-flex align-items-center justify-content-center gap-2"><i data-lucide="user-check"></i>{% translate "Assign User" %}</a></div></div>
<nav class="eenos-breadcrumb" aria-label="{% translate 'Breadcrumb' %}"><a href="{% url 'dashboard' %}">{% translate "Dashboard" %}</a><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "Databases" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span>{% translate "MySQL" %}</span><span class="eenos-breadcrumb-separator"><i data-lucide="chevron-right"></i></span><span class="eenos-breadcrumb-current">{% translate "MySQL Databases" %}</span></nav>
{% include "includes/form_alerts.html" %}
<div class="eenos-card"><div class="eenos-card-header"><div><h2 class="eenos-card-title">{% translate "Database Management" %}</h2><p class="eenos-card-subtitle">{% translate "Review server placement, assigned users, and database actions." %}</p></div><div class="eenos-card-action-icon"><i data-lucide="database"></i></div></div><div class="table-responsive"><table id="mysqlDatabasesTable" class="table align-middle w-100"><thead><tr><th>{% translate "Database" %}</th><th>{% translate "MySQL Server" %}</th><th>{% translate "Assigned Users" %}</th><th class="text-end">{% translate "Actions" %}</th></tr></thead></table></div></div>
<div class="modal fade" id="manageMysqlUsersModal" tabindex="-1" aria-labelledby="manageMysqlUsersTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"><div class="modal-content">
<div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="manageMysqlUsersTitle"><i data-lucide="users"></i>{% translate "Manage Assigned Users" %}</h2><div class="small text-muted mt-1">{% translate "Review or revoke access to this database." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
<div class="modal-body">
<div class="eenos-modal-info mb-3"><div class="eenos-modal-info-icon"><i data-lucide="database"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Database" %}</div><div class="eenos-modal-info-value font-monospace" id="manageMysqlDatabaseLabel"></div></div></div>
<div class="small fw-semibold text-muted text-uppercase mb-2" id="manageMysqlUsersCount"></div>
<div class="list-group" id="manageMysqlUsersList"></div>
</div>
<div class="modal-footer justify-content-between"><a href="{% url 'mysql_add_user_to_db' %}" class="btn btn-outline-primary"><i data-lucide="user-plus"></i>{% translate "Assign User" %}</a><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Close" %}</button></div>
</div></div></div>
<div class="modal fade" id="revokeMysqlUserModal" tabindex="-1" aria-labelledby="revokeMysqlUserTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"><form method="post" class="modal-content">{% csrf_token %}
<input type="hidden" name="delete_user" value="yes"><input type="hidden" name="db" id="revokeDatabase"><input type="hidden" name="dbuser" id="revokeDatabaseUser">
<div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2" id="revokeMysqlUserTitle"><i data-lucide="user-minus"></i>{% translate "Revoke Database Access" %}</h2><div class="small text-muted mt-1">{% translate "Remove this user's privileges from one database." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
<div class="modal-body">
<div class="d-grid gap-3 mb-4">
<div class="eenos-modal-info"><div class="eenos-modal-info-icon"><i data-lucide="user"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "MySQL user" %}</div><div class="eenos-modal-info-value font-monospace" id="revokeMysqlUserLabel"></div></div></div>
<div class="eenos-modal-info"><div class="eenos-modal-info-icon"><i data-lucide="database"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Database" %}</div><div class="eenos-modal-info-value font-monospace" id="revokeMysqlDatabaseLabel"></div></div></div>
</div>
<div class="eenos-amber-notice eenos-amber-notice-warning mb-0" role="alert"><div class="eenos-amber-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-amber-notice-content"><div class="eenos-amber-notice-title">{% translate "Database privileges will be removed" %}</div><div class="eenos-amber-notice-text">{% translate "The MySQL user will remain available, but it will no longer be able to access this database." %}</div></div></div>
</div>
<div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Cancel" %}</button><button type="submit" class="btn btn-warning"><i data-lucide="user-minus"></i>{% translate "Revoke Access" %}</button></div>
</form></div></div>
<div class="modal fade" id="deleteMysqlDatabaseModal" tabindex="-1" aria-labelledby="deleteMysqlDatabaseTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered"><form method="post" class="modal-content">{% csrf_token %}
<input type="hidden" name="delete_db" value="yes"><input type="hidden" name="db" id="deleteDatabase">
<div class="modal-header"><div><h2 class="modal-title fs-5 d-flex align-items-center gap-2 text-danger" id="deleteMysqlDatabaseTitle"><i data-lucide="trash-2"></i>{% translate "Delete MySQL Database" %}</h2><div class="small text-muted mt-1">{% translate "Permanently remove the database and all data stored in it." %}</div></div><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}"></button></div>
<div class="modal-body">
<div class="eenos-modal-info mb-4"><div class="eenos-modal-info-icon"><i data-lucide="database"></i></div><div class="eenos-modal-info-content"><div class="eenos-modal-info-label">{% translate "Database selected for deletion" %}</div><div class="eenos-modal-info-value font-monospace" id="deleteDatabaseLabel"></div></div></div>
<div class="eenos-notice eenos-notice-danger mb-3"><div class="eenos-notice-icon"><i data-lucide="triangle-alert"></i></div><div class="eenos-notice-content"><div class="eenos-notice-title">{% translate "Permanent data loss" %}</div><div class="eenos-notice-text">{% translate "All tables and data in this database will be deleted. This operation cannot be undone." %}</div></div></div>
<div class="small text-muted d-flex align-items-start gap-2"><i data-lucide="info"></i><span>{% translate "Assigned MySQL user accounts are not deleted and can be assigned to another database." %}</span></div>
</div>
<div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal"><i data-lucide="x"></i>{% translate "Keep Database" %}</button><button type="submit" class="btn btn-danger"><i data-lucide="trash-2"></i>{% translate "Permanently Delete" %}</button></div>
</form></div></div>
{% endblock %}
{% block extra_js %}<script>
(function($){"use strict";$(function(){
const esc=v=>$("<div>").text(v==null?"":v).html(),databaseUsers=new Map(),manageElement=document.getElementById("manageMysqlUsersModal"),manageModal=bootstrap.Modal.getOrCreateInstance(manageElement),revokeModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("revokeMysqlUserModal")),deleteModal=bootstrap.Modal.getOrCreateInstance(document.getElementById("deleteMysqlDatabaseModal"));
const table=$("#mysqlDatabasesTable").DataTable({processing:true,autoWidth:false,ajax:{url:"{% url 'mysql_databases_data' %}",dataSrc:"data"},pageLength:25,lengthMenu:[[25,50,100,-1],[25,50,100,"{% translate 'All' %}"]],order:[[0,"asc"]],language:{lengthMenu:"{% translate '_MENU_ Rows per page' %}",loadingRecords:"&nbsp;",processing:"{% translate 'Loading...' %}",emptyTable:"{% translate 'No MySQL databases have been created.' %}",zeroRecords:"{% translate 'No matching databases found.' %}"},responsive:{details:{renderer:DataTable.Responsive.renderer.listHiddenNodes()}},columns:[
{data:"database",responsivePriority:1,className:"text-nowrap",render:(v,t)=>t==="display"?'<div class="d-inline-flex align-items-center gap-2"><span class="d-inline-flex align-items-center gap-2 font-monospace fw-semibold"><i data-lucide="database"></i>'+esc(v)+'</span><button type="button" class="btn btn-sm btn-outline-secondary mysql-copy-database" data-database="'+encodeURIComponent(v)+'" title="{% translate "Copy database name" %}" aria-label="{% translate "Copy database name" %}"><i data-lucide="copy"></i></button></div>':v},
{data:"host",responsivePriority:3,className:"text-nowrap",render:(v,t)=>t==="display"?'<span class="eenos-badge eenos-badge-neutral">'+esc(v||"—")+"</span>":v},
{data:"users",responsivePriority:2,orderable:false,className:"text-nowrap",render:(users,t,row)=>{const assigned=Array.isArray(users)?users:[];databaseUsers.set(String(row.database),assigned);if(t!=="display")return assigned.join(" ");return'<div class="eenos-dt-actions justify-content-start flex-nowrap gap-2"><span class="badge eenos-badge-neutral">'+assigned.length+'</span><button type="button" class="btn btn-sm btn-outline-primary text-nowrap manage-users" data-database="'+encodeURIComponent(row.database)+'" title="{% translate "Manage assigned users" %}"><i data-lucide="users"></i><span>{% translate "Manage" %}</span></button></div>'}},
{data:null,orderable:false,searchable:false,responsivePriority:1,className:"text-end text-nowrap",render:(d,t,row)=>t!=="display"?"":'<div class="eenos-dt-actions justify-content-end"><button type="button" class="btn btn-sm btn-outline-danger delete-database" data-database="'+esc(row.database)+'" title="{% translate 'Delete database' %}"><i data-lucide="trash-2"></i></button></div>'}
],drawCallback:()=>lucide.createIcons()});
table.on("responsive-display",()=>lucide.createIcons());
$(document).on("click",".mysql-copy-database",async function(){const button=$(this),database=decodeURIComponent(this.dataset.database),copied=await window.EenosUapp.copyToClipboard(database);if(!copied)return;button.html('<i data-lucide="check"></i>').addClass("btn-outline-success").removeClass("btn-outline-secondary");lucide.createIcons();setTimeout(function(){button.html('<i data-lucide="copy"></i>').addClass("btn-outline-secondary").removeClass("btn-outline-success");lucide.createIcons()},1600)});
$(document).on("click",".manage-users",function(){const database=decodeURIComponent(this.dataset.database),users=databaseUsers.get(database)||[],list=$("#manageMysqlUsersList").empty();$("#manageMysqlDatabaseLabel").text(database);$("#manageMysqlUsersCount").text(users.length===1?"{% translate '1 assigned user' %}":users.length+" {% translate 'assigned users' %}");if(!users.length){list.append('<div class="text-center text-muted py-4"><i data-lucide="user-x"></i><div class="mt-2">{% translate "No users are assigned to this database." %}</div></div>')}else{users.forEach(function(user){list.append('<div class="list-group-item d-flex align-items-center justify-content-between gap-3"><span class="d-flex align-items-center gap-2 min-w-0"><i data-lucide="user"></i><span class="font-monospace text-truncate">'+esc(user)+'</span><button type="button" class="btn btn-sm btn-outline-secondary copy-mysql-user flex-shrink-0" data-user="'+encodeURIComponent(user)+'" title="{% translate "Copy username" %}" aria-label="{% translate "Copy username" %}"><i data-lucide="copy"></i></button></span><div class="eenos-dt-actions flex-nowrap"><button type="button" class="btn btn-sm btn-outline-danger text-nowrap revoke-user" data-database="'+encodeURIComponent(database)+'" data-user="'+encodeURIComponent(user)+'" title="{% translate "Revoke access" %}"><i data-lucide="user-minus"></i><span>{% translate "Revoke" %}</span></button></div></div>')})}lucide.createIcons();manageModal.show()});
$(document).on("click",".copy-mysql-user",async function(){const button=$(this),user=decodeURIComponent(this.dataset.user),copied=await window.EenosUapp.copyToClipboard(user);if(!copied)return;button.html('<i data-lucide="check"></i>').addClass("btn-outline-success").removeClass("btn-outline-secondary");lucide.createIcons();setTimeout(function(){button.html('<i data-lucide="copy"></i>').addClass("btn-outline-secondary").removeClass("btn-outline-success");lucide.createIcons()},1600)});
$(document).on("click",".revoke-user",function(){const database=decodeURIComponent(this.dataset.database),user=decodeURIComponent(this.dataset.user);$("#revokeDatabase").val(database);$("#revokeDatabaseUser").val(user);$("#revokeMysqlUserLabel").text(user);$("#revokeMysqlDatabaseLabel").text(database);manageElement.addEventListener("hidden.bs.modal",function showRevoke(){manageElement.removeEventListener("hidden.bs.modal",showRevoke);revokeModal.show()});manageModal.hide()});
$(document).on("click",".delete-database",function(){const database=this.dataset.database;$("#deleteDatabase").val(database);$("#deleteDatabaseLabel").text(database);deleteModal.show()});
})})(jQuery);
</script>{% endblock %}