{% if 'phpmyadmin' in enabled_modules %} 
<div class="col-md-2">
    <div class="card">
        <a style="text-decoration: none;" id="phpmyadmin-link" href="#" target="_blank" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Manage phpMyAdmin access on {{ current_domain }}/phpmyadmin">
            <div class="card-body ikona text-center" style="padding-bottom:0;">
                <svg version="1.1" id="access" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 58 58" style="width:50px; padding-bottom:1em; enable-background:new 0 0 58 58;" xml:space="preserve">
                    <style type="text/css"> 
                        .st0{fill:#414954;} 
                        .st1{fill:#EBF3FF;} 
                    </style>
                    <path class="st0" d="M27,0C12.1123047,0,0,12.1123047,0,27s12.1123047,27,27,27s27-12.1123047,27-27S41.8876953,0,27,0z M49.9075928,25H41.956665c-0.2987061-7.671875-2.2993774-14.3659058-5.3508911-18.8901367 C43.9279175,9.4902344,49.180542,16.6054077,49.9075928,25z M25,4.4251709V25h-8.9483643 C16.5040894,14.0232544,20.616333,6.2732544,25,4.4251709z M25,29v20.5748291 C20.616333,47.7267456,16.5040894,39.9767456,16.0516357,29H25z M29,49.5748901V29h8.9483643 C37.4959717,39.9768677,33.3839111,47.7269287,29,49.5748901z M29,25V4.4251099 C33.3839111,6.2730713,37.4959717,14.0231323,37.9483643,25H29z M17.394165,6.1100464 C14.3427124,10.6343384,12.342041,17.3282471,12.043335,25H4.0924072C4.819458,16.6055298,10.0722046,9.4905396,17.394165,6.1100464 z M4.0924072,29h7.9509277c0.2987061,7.6719971,2.2993164,14.3659058,5.350769,18.8900757 C10.0722046,44.5097046,4.819458,37.3947754,4.0924072,29z M36.6057739,47.8901978 C39.6572876,43.3660278,41.657959,36.6720581,41.956665,29h7.9509277 C49.180542,37.3948975,43.9279175,44.5098877,36.6057739,47.8901978z"/>
                    <circle class="st1" cx="45" cy="45" r="13"/>
                    <path class="st0" d="M45,50L45,50c-0.5499992,0-1-0.4500008-1-1v-8c0-0.5499992,0.4500008-1,1-1l0,0c0.5499992,0,1,0.4500008,1,1v8 C46,49.5499992,45.5499992,50,45,50z"/>
                    <path class="st0" d="M50,45L50,45c0,0.5499992-0.4500008,1-1,1h-8c-0.5499992,0-1-0.4500008-1-1l0,0c0-0.5499992,0.4500008-1,1-1h8 C49.5499992,44,50,44.4500008,50,45z"/>
                </svg>
                <h6 class="card-title" id="manage_phpmyadmin_public_title">{{ _('/phpmyadmin') }}<br><span id="phpmyadmin_public_status" class="badge bg-dark">{{ _('Checking...') }}</span></h6>
            </div>
        </a>
    </div>
</div>

<script>
(function() {
    const currentDomainForPhpmyAdminChecks = "{{ current_domain }}";
    const statusElement = document.getElementById('phpmyadmin_public_status');
    const phpmyadminLink = document.getElementById('phpmyadmin-link');

    // Function to check the current phpMyAdmin status
    function checkPhpMyAdminStatus() {
        fetch(`/phpmyadmin/manage/${currentDomainForPhpmyAdminChecks}?action=status`)
            .then(response => response.json())
            .then(data => {
                if (data.phpmyadmin_status === 'on') {
                    statusElement.textContent = 'Enabled';
                    statusElement.classList.remove('bg-dark', 'bg-danger', 'bg-warning');
                    statusElement.classList.add('bg-success');
                    phpmyadminLink.href = `/phpmyadmin/manage/${currentDomainForPhpmyAdminChecks}?action=disable`;
                    phpmyadminLink.setAttribute('data-bs-title', `Disable phpMyAdmin access on ${currentDomainForPhpmyAdminChecks}/phpmyadmin`);
                } else {
                    statusElement.textContent = 'Disabled';
                    statusElement.classList.remove('bg-dark', 'bg-success', 'bg-warning');
                    statusElement.classList.add('bg-dark');
                    phpmyadminLink.href = `/phpmyadmin/manage/${currentDomainForPhpmyAdminChecks}?action=enable`;
                    phpmyadminLink.setAttribute('data-bs-title', `Enable phpMyAdmin access on ${currentDomainForPhpmyAdminChecks}/phpmyadmin`);
                }

                const tooltip = new bootstrap.Tooltip(phpmyadminLink);
                tooltip.enable();

            })
            .catch(error => {
                console.error('Error checking phpMyAdmin status:', error);
                statusElement.textContent = 'Error';
                statusElement.classList.remove('bg-success', 'bg-danger', 'bg-dark');
                statusElement.classList.add('bg-warning');
            });
    }

    // Function to toggle phpMyAdmin access
    function togglePhpMyAdmin() {
        const action = phpmyadminLink.getAttribute('href').split('action=')[1];
        fetch(`/phpmyadmin/manage/${currentDomainForPhpmyAdminChecks}?action=${action}`, { method: 'GET' })
            .then(response => response.json())
            .then(data => {
                if (data.message) {
                    checkPhpMyAdminStatus();  // Reload the status after toggling
                } else {
                    console.error('Unexpected response format:', data);
                }
            })
            .catch(error => {
                console.error('Error toggling phpMyAdmin:', error);
            });
    }

    checkPhpMyAdminStatus();

    phpmyadminLink.addEventListener('click', function(event) {
        event.preventDefault();
        const tooltip = bootstrap.Tooltip.getInstance(phpmyadminLink); // Get the tooltip instance
        if (tooltip) {
            tooltip.hide(); // Hide the tooltip
            tooltip.dispose(); // Dispose of the tooltip instance
        }
        togglePhpMyAdmin();      // Call the toggle function
    });
})();
</script>
{% endif %}