{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{{ childDomain }} - CyberPanel{% endblock %}
{% block content %}

    {% load static %}
    {% get_current_language as LANGUAGE_CODE %}
    <!-- Current language: {{ LANGUAGE_CODE }} -->
    
    <div ng-controller="launchChild" ng-init="childDomainName='{{ childDomain }}'; masterDomain='{{ domain }}'">

    <style>
        /* Ultra-Modern CyberPanel Design System */
        /* :root block commented out to allow dark mode variables from base template
        :root {
            --primary-color: #6366f1;
            --primary-hover: #5558e3;
            --primary-light: #eef2ff;
            --secondary-color: #8b5cf6;
            --accent-color: #ec4899;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --warning-color: #f59e0b;
            --info-color: #3b82f6;
            
            --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            --bg-gradient-alt: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            --bg-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
            
            --bg-light: #f8fafc;
            --bg-card: #ffffff;
            --bg-hover: #f1f5f9;
            --border-color: #e2e8f0;
            --border-light: #f1f5f9;
            
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-muted: #94a3b8;
            
            --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
            --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
            
            --radius-sm: 6px;
            --radius-md: 8px;
            --radius-lg: 12px;
            --radius-xl: 16px;
            --radius-full: 9999px;
            
            --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        */
        
        /* Container Styling */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            min-height: 100vh;
            background: transparent;
        }
        
        /* Page Title Section */
        #page-title {
            background: var(--bg-gradient);
            color: white;
            padding: 40px;
            border-radius: var(--radius-xl);
            margin-bottom: 30px;
            box-shadow: var(--shadow-xl);
            position: relative;
            overflow: hidden;
        }
        
        #page-title::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            animation: pulse 4s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.3; }
        }
        
        #page-title h2 {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 10px;
            letter-spacing: -0.5px;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        #page-title p {
            font-size: 16px;
            opacity: 0.95;
            margin: 0;
            position: relative;
            z-index: 1;
            line-height: 1.6;
        }
        
        /* Main Panel */
        .panel {
            background: var(--bg-secondary, white);
            border-radius: var(--radius-xl);
            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
            border: 1px solid var(--border-color, #e8e9ff);
            overflow: hidden;
            position: relative;
            margin-bottom: 20px;
        }
        
        .panel-body {
            padding: 0;
        }
        
        .example-box-wrapper {
            margin-bottom: 20px;
        }
        
        /* Content Box */
        .content-box {
            background: var(--bg-secondary, white);
            border-radius: var(--radius-xl);
            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
            border: 1px solid var(--border-color, #e8e9ff);
            overflow: hidden;
            transition: box-shadow 0.2s;
        }
        
        .content-box:hover {
            box-shadow: 0 4px 16px var(--shadow-color-hover, rgba(0,0,0,0.12));
        }
        
        /* Content Box Header */
        .content-box-header {
            background: linear-gradient(135deg, var(--primary-light, #eef2ff) 0%, var(--bg-secondary, #f8fafc) 100%);
            padding: 25px 30px;
            margin: 0;
            font-size: 20px;
            font-weight: 700;
            color: var(--text-primary, #2f3640);
            border-bottom: 1px solid var(--border-color, #e8e9ff);
            letter-spacing: -0.3px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }
        
        .content-box-header img {
            width: 24px;
            height: 24px;
        }
        
        .content-box-wrapper {
            padding: 30px;
        }
        
        /* Buttons */
        .btn {
            padding: 10px 20px;
            border-radius: var(--radius-md);
            font-weight: 600;
            transition: var(--transition-base);
            border: none;
            font-size: 14px;
            letter-spacing: 0.3px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            text-decoration: none;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .btn:active::before {
            width: 300px;
            height: 300px;
        }
        
        .btn-primary {
            background: var(--bg-gradient);
            color: white;
            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
            color: white;
        }
        
        .btn-preview {
            background: linear-gradient(135deg, var(--accent-color, #ec4899) 0%, #db2777 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
        }
        
        .btn-preview:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
            color: white;
        }
        
        .btn-git {
            background: linear-gradient(135deg, var(--warning-color, #f59e0b) 0%, #dc2626 100%);
            color: white;
        }
        
        .btn-sync {
            background: linear-gradient(135deg, var(--info-color, #3b82f6) 0%, #2563eb 100%);}
            color: white;
        }
        
        .btn-stress {
            background: linear-gradient(135deg, #4b5563 0%, #1f2937 100%);
            color: white;
        }
        
        /* Table Styling */
        .table {
            margin: 0;
            background: var(--bg-secondary, white);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.08));
        }
        
        .table thead {
            background: var(--bg-gradient);
        }
        
        .table thead th {
            border: none;
            color: white;
            font-weight: 600;
            padding: 18px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.6px;
        }
        
        .table tbody tr {
            transition: all var(--transition-base);
            border-bottom: 1px solid var(--border-light, #f0f0ff);
        }
        
        .table tbody tr:last-child {
            border-bottom: none;
        }
        
        .table tbody tr:hover {
            background: var(--bg-hover, #f8f9ff);
            box-shadow: 0 2px 4px var(--shadow-color, rgba(0,0,0,0.08));
        }
        
        .table tbody td {
            padding: 18px;
            border: none;
            vertical-align: middle;
            color: var(--text-primary, #2f3640);
        }
        
        .row-title {
            font-weight: 600;
            color: var(--text-primary, #2f3640);
        }
        
        /* Progress Bar */
        .progressbar {
            position: relative;
            width: 100%;
            height: 30px;
            background: var(--border-color, #e8e9ff);
            border-radius: var(--radius-full);
            overflow: hidden;
            margin-bottom: 20px;
            box-shadow: inset 0 2px 4px var(--shadow-color, rgba(0,0,0,0.08));
        }
        
        .progressbar-value {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: var(--bg-gradient);
            transition: width 0.6s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 14px;
        }
        
        /* Title Hero */
        .title-hero {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary, #2f3640);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .title-hero::before {
            content: '';
            width: 4px;
            height: 20px;
            background: var(--bg-gradient);
            border-radius: 2px;
        }
        
        /* Alert Styling */
        .alert {
            border-radius: var(--radius-lg);
            border: none;
            padding: 18px 24px;
            margin-bottom: 20px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .alert-success {
            background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
            color: var(--success-text, #065f46);
            border: 1px solid var(--success-border, #6ee7b7);
        }
        
        .alert-danger {
            background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
            color: var(--danger-text, #991b1b);
            border: 1px solid var(--danger-border, #fca5a5);
        }
        
        /* Loading Animation */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        img[src*="loading.gif"] {
            animation: spin 1s linear infinite;
            width: 20px;
            height: 20px;
            vertical-align: middle;
        }
        
        /* Icon Box */
        .icon-box {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 20px;
            background: var(--bg-hover, #f8f9ff);
            border: 1px solid var(--border-color, #e8e9ff);
            border-radius: var(--radius-lg);
            transition: var(--transition-base);
            text-decoration: none;
            color: var(--text-primary, #2f3640);
        }
        
        .icon-box:hover {
            background: var(--border-color, #e8e9ff);
            border-color: var(--accent-color, #5b5fcf);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px var(--accent-shadow-light, rgba(91,95,207,0.15));
            color: var(--accent-color, #5b5fcf);
        }
        
        .icon-box img {
            width: 65px;
            height: 65px;
            object-fit: contain;
        }
        
        .icon-box .h4 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary, #2f3640);
        }
        
        .icon-box:hover .h4 {
            color: var(--accent-color, #5b5fcf);
        }
        
        /* Form Styling */
        .form-horizontal {
            background: var(--bg-secondary, white);
            padding: 25px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color, #e8e9ff);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .control-label {
            font-weight: 600;
            color: var(--text-primary, #2f3640);
            margin-bottom: 8px;
            font-size: 14px;
        }
        
        .form-control {
            border: 2px solid var(--border-color, #e8e9ff);
            border-radius: var(--radius-md);
            padding: 12px 16px;
            font-size: 15px;
            transition: var(--transition-base);
            background: var(--bg-secondary, white);
            color: var(--text-primary, #2f3640);
        }
        
        .form-control:focus {
            border-color: var(--accent-color, #5b5fcf);
            box-shadow: 0 0 0 3px var(--accent-focus, rgba(91,95,207,0.1));
            outline: none;
        }
        
        textarea.form-control {
            resize: vertical;
            font-family: 'Courier New', monospace;
            font-size: 13px;
        }
        
        /* Modal and Form Modal Styling */
        .form-horizontal.bordered-row {
            background: var(--bg-secondary, white);
            padding: 30px;
            border-radius: var(--radius-xl);
            box-shadow: 0 10px 40px var(--shadow-color, rgba(0,0,0,0.08));
            border: 1px solid var(--border-color, #e8e9ff);
            margin: 20px 0;
        }
        
        /* Close button styling */
        .glyph-icon.icon-close {
            font-size: 24px;
            color: var(--danger-color);
            transition: var(--transition-base);
            cursor: pointer;
        }
        
        .glyph-icon.icon-close:hover {
            transform: scale(1.2);
            color: var(--danger-color, #dc2626);
        }
        
        /* Rewrite Rules and Config Specific Styling */
        textarea[ng-model="rewriteRules"],
        textarea[ng-model="configData"] {
            background: var(--bg-code, #f8fafc);
            border: 2px solid var(--border-color, #e8e9ff);
            border-radius: var(--radius-lg);
            padding: 16px;
            font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-primary, #2f3640);
            min-height: 300px;
        }
        
        textarea[ng-model="rewriteRules"]:focus,
        textarea[ng-model="configData"]:focus {
            background: var(--bg-secondary, white);
            border-color: var(--accent-color, #5b5fcf);
            box-shadow: 0 0 0 4px var(--accent-focus, rgba(91, 95, 207, 0.1));
        }
        
        /* Save button styling */
        .btn-lg {
            padding: 14px 28px;
            font-size: 16px;
            font-weight: 600;
            border-radius: var(--radius-lg);
            box-shadow: 0 4px 15px var(--accent-shadow, rgba(91, 95, 207, 0.2));
        }
        
        .btn-primary.btn-lg:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px var(--accent-shadow, rgba(91, 95, 207, 0.3));
        }
        
        /* Form group spacing */
        .form-horizontal.bordered-row .form-group {
            margin-bottom: 25px;
        }
        
        /* Alert styling in modal */
        .form-horizontal.bordered-row .alert {
            margin-bottom: 25px;
            font-size: 15px;
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }
            
            #page-title {
                padding: 25px;
            }
            
            #page-title h2 {
                font-size: 24px;
                flex-direction: column;
                align-items: flex-start;
            }
            
            .content-box-wrapper {
                padding: 20px;
            }
            
            .col-md-6 {
                margin-bottom: 20px;
            }
        }
    </style>

    <div class="container">

        <div id="page-title">
            <h2>
                <i class="fas fa-sitemap" style="margin-right: 10px;"></i>
                <span id="childDomain">{{ childDomain }}</span>
                <span style="display: none" id="domainNamePage">{{ domain }}</span>
                <a target="_blank" href="{$ previewUrl $}" class="btn btn-preview" title="Preview Site">
                    <i class="fas fa-eye"></i>
                    {% trans "Preview" %}
                </a>
            </h2>
            <p>{% trans "Manage all functions related to your child domain" %} - {% trans "Master domain:" %} {{ domain }}</p>
        </div>

        {% if not error %}

            <div class="example-box-wrapper">
                <div class="content-box">
                    <h3 class="content-box-header">
                        <span>
                            <i class="fas fa-chart-line" style="color: var(--primary-color); margin-right: 10px;"></i>
                            {% trans "Resource Usage" %}
                        </span>
                        <div style="display: flex; gap: 10px;">
                            <a class="btn btn-git"
                               href="/websites/{{ childDomain }}/manageGIT"
                               title="Manage Git">
                                <i class="fab fa-git-alt"></i>
                                {% trans "Manage Git" %}
                            </a>
                            <a class="btn btn-sync"
                               href="/websites/{{ domain }}/{{ childDomain }}/syncToMaster"
                               title="Copy/Sync to Master">
                                <i class="fas fa-sync"></i>
                                {% trans "Sync to Master" %}
                            </a>
                            <a class="btn btn-stress"
                               href="https://cyberpanel.net/KnowledgeBase/home/child-domains-launcher/"
                               target="_blank"
                               title="Stress Test">
                                <i class="fas fa-tachometer-alt"></i>
                                {% trans "Stress Test" %}
                            </a>
                        </div>
                    </h3>

                    <div class="content-box-wrapper">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table">
                                    <thead>
                                    <tr>
                                        <th>{% trans "Resource" %}</th>
                                        <th>{% trans "Usage" %}</th>
                                        <th>{% trans "Allowed" %}</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td class="row-title">
                                            <i class="fas fa-upload" style="color: var(--info-color); margin-right: 8px;"></i>
                                            {% trans "FTP" %}
                                        </td>
                                        <td><span class="text-success h4">{{ ftpUsed }}</span></td>
                                        <td><span class="text-success h4">{{ ftpTotal }}</span></td>
                                    </tr>
                                    <tr>
                                        <td class="row-title">
                                            <i class="fas fa-database" style="color: var(--secondary-color); margin-right: 8px;"></i>
                                            {% trans "Databases" %}
                                        </td>
                                        <td><span class="text-success h4">{{ databasesUsed }}</span></td>
                                        <td><span class="text-success h4">{{ databasesTotal }}</span></td>
                                    </tr>
                                    <tr>
                                        <td class="row-title">
                                            <i class="fas fa-hdd" style="color: var(--primary-color); margin-right: 8px;"></i>
                                            {% trans "Disk Usage" %}
                                        </td>
                                        <td><span class="text-success h4">{{ diskInMB }} (MB)</span></td>
                                        <td><span class="text-success h4">{{ diskInMBTotal }} (MB)</span></td>
                                    </tr>
                                    <tr>
                                        <td class="row-title">
                                            <i class="fas fa-wifi" style="color: var(--accent-color); margin-right: 8px;"></i>
                                            {% trans "Bandwidth Usage" %}
                                        </td>
                                        <td><span class="text-success h4">{{ bwInMB }} (MB)</span></td>
                                        <td><span class="text-success h4">{{ bwInMBTotal }} (MB)</span></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                            <div class="col-md-6">
                                <div style="padding: 20px;">
                                    {% if viewSSL == 1 %}
                                        <div class="alert alert-success">
                                            <i class="fas fa-lock" style="font-size: 20px;"></i>
                                            <div>
                                                <h4 style="margin: 0 0 5px 0; font-size: 16px;">{{ authority }}</h4>
                                                <p style="margin: 0;">{% trans "Your SSL will expire in" %} {{ days }} {% trans "days" %}{% if renewal_when %} • {% trans "Renews" %} {{ renewal_when }}{% endif %}</p>
                                            </div>
                                        </div>
                                    {% endif %}
                                    
                                    <h3 class="title-hero">
                                        <i class="fas fa-hdd"></i>
                                        {% trans "Disk Usage" %}
                                    </h3>
                                    <div class="progressbar" data-value="{{ diskUsage }}">
                                        <div class="progressbar-value" style="width: {{ diskUsage }}%;">
                                            {{ diskUsage }}%
                                        </div>
                                    </div>

                                    <h3 class="title-hero">
                                        <i class="fas fa-wifi"></i>
                                        {% trans "Bandwidth Usage" %}
                                    </h3>
                                    <div class="progressbar" data-value="{{ bwUsage }}">
                                        <div class="progressbar-value" style="width: {{ bwUsage }}%;">
                                            {{ bwUsage }}%
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>


            <div class="example-box-wrapper">
                <div class="content-box">
                    <h3 class="content-box-header">
                        <span>
                            <i class="fas fa-file-alt" style="color: var(--primary-color); margin-right: 10px;"></i>
                            {% trans "Logs" %}
                            <img ng-hide="logFileLoading" src="/static/images/loading.gif">
                        </span>
                    </h3>
                    <div class="content-box-wrapper">
                        <div class="row">
                            <div class="col-md-6">
                                <a ng-click="fetchLogs(1)" href="" class="icon-box" title="{% trans 'Load Access Logs' %}">
                                    <i class="fas fa-file-alt" style="font-size: 48px; color: var(--info-color);"></i>
                                    <span class="h4">{% trans "Access Logs" %}</span>
                                </a>
                            </div>

                            <div class="col-md-6">
                                <a ng-click="fetchErrorLogs(1)" href="" class="icon-box" title="{% trans 'Load Error Logs' %}">
                                    <i class="fas fa-exclamation-triangle" style="font-size: 48px; color: var(--danger-color);"></i>
                                    <span class="h4">{% trans "Error Logs" %}</span>
                                </a>
                            </div>

                        </div>

                        <div class="col-md-12" style="margin-top: 20px;">
                            <form ng-hide="hideLogs" class="form-horizontal">
                                <div ng-hide="logsFeteched" class="alert alert-success">
                                    <i class="fas fa-check-circle"></i>
                                    <p>{% trans "Logs Fetched" %}</p>
                                </div>

                                <div ng-hide="couldNotFetchLogs" class="alert alert-danger">
                                    <i class="fas fa-exclamation-circle"></i>
                                    <p>{% trans "Could not fetch logs, see the logs file through command line. Error message:" %} {$ errorMessage $}</p>
                                </div>

                                <div ng-hide="couldNotConnect" class="alert alert-danger">
                                    <i class="fas fa-wifi"></i>
                                    <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                </div>

                                <div ng-hide="fetchedData">
                                    <div class="row" style="margin-bottom: 20px;">
                                        <div class="col-sm-3">
                                            <input placeholder="Search..." ng-model="logSearch" name="dom" type="text"
                                                   class="form-control" required>
                                        </div>

                                        <div class="col-sm-2">
                                            <input placeholder="Page Number" type="number" class="form-control"
                                                   ng-model="pageNumber" required>
                                        </div>

                                        <div class="col-sm-6">
                                            <button ng-click="fetchLogs(3)" type="button" class="btn btn-primary">
                                                <i class="fas fa-chevron-right"></i>
                                                {% trans "Next" %}
                                            </button>
                                            <button ng-click="fetchLogs(4)" type="button" class="btn btn-primary" style="margin-left: 10px;">
                                                <i class="fas fa-chevron-left"></i>
                                                {% trans "Previous" %}
                                            </button>
                                        </div>

                                        <div class="col-sm-1">
                                            <button ng-click="hidelogsbtn()" type="button" class="btn btn-link" style="color: var(--danger-color);">
                                                <i class="fas fa-times" style="font-size: 20px;"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th>Type</th>
                                                <th>IP Address</th>
                                                <th>Time</th>
                                                <th>Resource</th>
                                                <th>Size</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr ng-repeat="record in records | filter:logSearch">
                                                <td ng-bind="record.domain"></td>
                                                <td ng-bind="record.ipAddress"></td>
                                                <td ng-bind="record.time"></td>
                                                <td ng-bind="record.resource"></td>
                                                <td ng-bind="record.size"></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>


                                <div ng-hide="hideErrorLogs">
                                    <div class="row" style="margin-bottom: 20px;">
                                        <div class="col-sm-2">
                                            <input placeholder="Page Number" type="number" class="form-control"
                                                   ng-model="errorPageNumber" required>
                                        </div>

                                        <div class="col-sm-9">
                                            <button ng-click="fetchErrorLogs(3)" type="button" class="btn btn-primary">
                                                <i class="fas fa-chevron-right"></i>
                                                {% trans "Next" %}
                                            </button>
                                            <button ng-click="fetchErrorLogs(4)" type="button" class="btn btn-primary" style="margin-left: 10px;">
                                                <i class="fas fa-chevron-left"></i>
                                                {% trans "Previous" %}
                                            </button>
                                        </div>

                                        <div class="col-sm-1">
                                            <button ng-click="hideErrorLogsbtn()" type="button" class="btn btn-link" style="color: var(--danger-color);">
                                                <i class="fas fa-times" style="font-size: 20px;"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col-sm-12">
                                        <textarea ng-model="errorLogsData" rows="20" class="form-control" style="font-family: 'Courier New', monospace;"></textarea>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="example-box-wrapper">
                <div class="content-box">
                    <h3 class="content-box-header">
                        <span>
                            <i class="fas fa-cog" style="color: var(--primary-color); margin-right: 10px;"></i>
                            {% trans "Configurations" %}
                            <img ng-hide="configFileLoading" src="/static/images/loading.gif">
                        </span>
                    </h3>

                    <div class="content-box-wrapper">
                        <div class="row">
                            <div class="col-md-3">
                                <a ng-click="fetchConfigurations()" href="" class="icon-box"
                                   title="{% trans 'Edit vHost Main Configurations' %}">
                                    <i class="fas fa-file-code" style="font-size: 48px; color: var(--primary-color);"></i>
                                    <span class="h4">{% trans "vHost Conf" %}</span>
                                </a>
                            </div>

                            <div class="col-md-3">
                                <a href="{% url 'ApacheManager' domain=childDomain %}" class="icon-box"
                                   title="{% trans 'Apache Manager' %}">
                                    <i class="fas fa-server" style="font-size: 48px; color: var(--warning-color);"></i>
                                    <span class="h4">{% trans "Apache Manager" %}</span>
                                </a>
                            </div>

                            <div class="col-md-3">
                                <a ng-click="fetchRewriteFules()" href="" class="icon-box"
                                   title="{% trans 'Add Rewrite Rules (.htaccess)' %}">
                                    <i class="fas fa-code" style="font-size: 48px; color: var(--secondary-color);"></i>
                                    <span class="h4">{% trans "Rewrite Rules" %}</span>
                                </a>
                            </div>

                            <div class="col-md-3">
                                <a ng-click="addSSL()" href="" class="icon-box" title="{% trans 'Add Your Own SSL' %}">
                                    <i class="fas fa-lock" style="font-size: 48px; color: var(--success-color);"></i>
                                    <span class="h4">{% trans "Add SSL" %}</span>
                                </a>
                            </div>

                            <div class="col-md-3">
                                <a ng-click="changePHPMaster()" href="" class="icon-box" title="{% trans 'Change PHP Version' %}">
                                    <i class="fab fa-php" style="font-size: 48px; color: var(--info-color);"></i>
                                    <span class="h4">{% trans "Change PHP" %}</span>
                                </a>
                            </div>
                        </div>

                        <!---- HTML for main ssl file ---->
                        <div class="col-md-12" style="margin-top: 20px;">
                            <form ng-hide="hidsslconfigs" class="form-horizontal">
                                <div ng-hide="sslSaved" class="alert alert-success">
                                    <i class="fas fa-check-circle"></i>
                                    <p>{% trans "SSL Saved" %}</p>
                                </div>

                                <div ng-hide="couldNotSaveSSL" class="alert alert-danger">
                                    <i class="fas fa-exclamation-circle"></i>
                                    <p>{% trans "Could not save SSL. Error message:" %} {$ errorMessage $}</p>
                                </div>

                                <div ng-hide="couldNotConnect" class="alert alert-danger">
                                    <i class="fas fa-wifi"></i>
                                    <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                </div>

                                <div class="form-group">
                                    <div style="margin-bottom: 20px; text-align: right;">
                                        <button ng-click="hidesslbtn()" type="button" class="btn btn-link" style="color: var(--danger-color);">
                                            <i class="fas fa-times" style="font-size: 20px;"></i>
                                        </button>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <label class="control-label">
                                                <i class="fas fa-certificate"></i>
                                                {% trans "SSL Certificate" %}
                                            </label>
                                            <textarea placeholder="Paste Your Certificate Here" ng-model="cert" rows="10"
                                                      class="form-control"></textarea>
                                        </div>
                                        <div class="col-sm-6">
                                            <label class="control-label">
                                                <i class="fas fa-key"></i>
                                                {% trans "Private Key" %}
                                            </label>
                                            <textarea placeholder="Paste Your Private Key Here" ng-model="key" rows="10"
                                                      class="form-control"></textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <button type="button" ng-click="saveSSL()" class="btn btn-primary">
                                        <i class="fas fa-save"></i>
                                        {% trans "Save SSL" %}
                                    </button>
                                </div>
                            </form>
                        </div>


                            <!----- HTML For SSL ---->


                            <!---- HTML for main conf file ---->

                            <div class="col-md-12">

                                <form ng-hide="configurationsBox" class="form-horizontal bordered-row">

                                    <div ng-hide="configsFetched" class="alert alert-success">
                                        <p>{% trans "Current configuration in the file fetched." %}</p>
                                    </div>


                                    <div ng-hide="couldNotFetchConfigs" class="alert alert-danger">
                                        <p>{% trans "Could not fetch current configuration. Error message:" %} {$
                                            errorMessage $}</p>
                                    </div>


                                    <div ng-hide="couldNotConnect" class="alert alert-danger">
                                        <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                    </div>

                                    <div ng-hide="configSaved" class="alert alert-success">
                                        <p>{% trans "Configurations saved." %}</p>
                                    </div>

                                    <div ng-hide="couldNotSaveConfigurations" class="alert alert-danger">
                                        <p>{% trans "Could not fetch current configuration. Error message:" %} {$
                                            errorMessage $}</p>
                                    </div>


                                    <div ng-hide="fetchedConfigsData" class="form-group">
                                        <div style="margin-bottom: 1%;" class="col-sm-offset-11 col-sm-1">
                                            <a ng-click="hideconfigbtn()" href=""><h3
                                                    class="glyph-icon icon-close text-danger mt-5" style="font-size: 24px; cursor: pointer;">&times;</h3></a>
                                        </div>
                                        <div class="col-sm-12">
                                            <textarea ng-model="configData" rows="20" class="form-control"></textarea>
                                        </div>
                                    </div>

                                    <div ng-hide="saveConfigBtn" class="form-group">
                                        <label class="col-sm-3 control-label"></label>
                                        <div class="col-sm-4">
                                            <button type="button" ng-click="saveCongiruations()"
                                                    class="btn btn-primary btn-lg">{% trans "Save" %}</button>

                                        </div>
                                    </div>


                                </form>

                            </div>

                            <!-- HTML For rewrite rules-->

                            <div class="col-md-12">

                                <form ng-hide="configurationsBoxRewrite" class="form-horizontal bordered-row">


                                    <div ng-hide="rewriteRulesFetched" class="alert alert-success">
                                        <p>{% trans "Current rewrite rules in the file fetched." %}</p>
                                    </div>


                                    <div ng-hide="couldNotFetchRewriteRules" class="alert alert-danger">
                                        <p>{% trans "Could not fetch current rewrite rules. Error message:" %} {$
                                            errorMessage $}</p>
                                    </div>


                                    <div ng-hide="couldNotConnect" class="alert alert-danger">
                                        <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                    </div>

                                    <div ng-hide="rewriteRulesSaved" class="alert alert-success">
                                        <p>{% trans "Configurations saved." %}</p>
                                    </div>

                                    <div ng-hide="couldNotSaveRewriteRules" class="alert alert-danger">
                                        <p>{% trans "Could not save rewrite rules. Error message:" %} {$ errorMessage
                                            $}</p>
                                    </div>


                                    <div ng-hide="fetchedRewriteRules" class="form-group">
                                        <div style="margin-bottom: 1%;" class="col-sm-offset-11 col-sm-1">
                                            <a ng-click="hideRewriteRulesbtn()" href=""><h3
                                                    class="glyph-icon icon-close text-danger mt-5" style="font-size: 24px; cursor: pointer;">&times;</h3></a>
                                        </div>
                                        <div class="col-sm-12">
                                            <textarea ng-model="rewriteRules" rows="10" class="form-control"></textarea>
                                        </div>
                                    </div>

                                    <div ng-hide="saveRewriteRulesBTN" class="form-group">
                                        <label class="col-sm-3 control-label"></label>
                                        <div class="col-sm-4">
                                            <button type="button" ng-click="saveRewriteRules()"
                                                    class="btn btn-primary btn-lg">{% trans "Save Rewrite Rules" %}</button>

                                        </div>
                                    </div>


                                </form>

                            </div>

                            <!--- HTML To change PHP --->

                            <div class="col-md-12">

                                <form ng-hide="changePHPView" name="" action="/" class="form-horizontal bordered-row">


                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">{% trans "Select PHP" %}</label>
                                        <div class="col-sm-6">
                                            <select ng-model="phpSelectionMaster" class="form-control">
                                                {% for php in phps %}
                                                    <option>{{ php }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>

                                        <div style="margin-bottom: 1%;" class=" col-sm-1">
                                            <a title="{% trans 'Cancel' %}" ng-click="hideChangePHPMaster()"
                                               href=""><h3 class="glyph-icon icon-close text-danger mt-5" style="font-size: 24px; cursor: pointer;">&times;</h3></a>
                                        </div>

                                    </div>


                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"></label>
                                        <div class="col-sm-4">
                                            <button type="button" ng-click="changePHPVersionMaster()"
                                                    class="btn btn-primary btn-lg">{% trans "Change PHP" %}</button>
                                        </div>
                                    </div>


                                    <div class="form-group">

                                        <label class="col-sm-3 control-label"></label>
                                        <div class="col-sm-4">
                                            <div ng-hide="failedToChangePHPMaster" class="alert alert-danger">
                                                <p>{% trans "Failed to change PHP version. Error message:" %} {$
                                                    errorMessage $}</p>
                                            </div>

                                            <div ng-hide="phpChangedMaster" class="alert alert-success">
                                                <p>{% trans "PHP successfully changed for: " %} <strong>{$ websiteDomain
                                                    $}</strong></p>
                                            </div>

                                            <div ng-hide="couldNotConnect" class="alert alert-danger">
                                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                            </div>
                                        </div>


                                    </div>


                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


            <div class="example-box-wrapper">
                <div class="content-box">
                    <h3 class="content-box-header">
                        <span>
                            <i class="fas fa-folder" style="color: var(--primary-color); margin-right: 10px;"></i>
                            {% trans "Files" %}
                        </span>
                    </h3>

                    <div class="content-box-wrapper">
                        <div class="row">
                            <div class="col-md-3">
                                <a href="{$ fileManagerURL $}" target="_blank" class="icon-box" title="{% trans 'File Manager' %}">
                                    <i class="fas fa-folder-open" style="font-size: 48px; color: var(--primary-color);"></i>
                                    <span class="h4">{% trans "File Manager" %}</span>
                                </a>
                            </div>

                            <div class="col-md-3">
                                <a ng-click="openBaseDirView()" href="" class="icon-box" title="{% trans 'open_basedir Protection' %}">
                                    <i class="fas fa-shield-alt" style="font-size: 48px; color: var(--warning-color);"></i>
                                    <span class="h4">{% trans "open_basedir" %}</span>
                                </a>
                            </div>

                            {% if ftp %}
                                <div class="col-md-3">
                                    <a href="{% url 'createFTPAccount' %}" class="icon-box" title="{% trans 'Create FTP Account' %}">
                                        <i class="fas fa-user-plus" style="font-size: 48px; color: var(--success-color);"></i>
                                        <span class="h4">{% trans "Create FTP Acct" %}</span>
                                    </a>
                                </div>

                                <div class="col-md-3">
                                    <a href="{% url 'deleteFTPAccount' %}" class="icon-box" title="{% trans 'Delete FTP Account' %}">
                                        <i class="fas fa-user-minus" style="font-size: 48px; color: var(--danger-color);"></i>
                                        <span class="h4">{% trans "Delete FTP Acct" %}</span>
                                    </a>
                                </div>
                            {% endif %}
                        </div>


                        <!--- HTML To change open_basedir --->
                        <div ng-hide="openBaseDirBox" class="col-md-12" style="margin-top: 20px;">
                            <form action="/" class="form-horizontal">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label">
                                        <i class="fas fa-shield-alt"></i>
                                        {% trans "open_basedir Protection" %}
                                    </label>
                                    <div class="col-sm-6">
                                        <select ng-model="openBasedirValue" class="form-control">
                                            <option>Enable</option>
                                            <option>Disable</option>
                                        </select>
                                    </div>

                                    <div ng-hide="baseDirLoading" class="col-sm-1">
                                        <img src="{% static 'images/loading.gif' %}">
                                    </div>

                                    <div class="col-sm-1">
                                        <button title="{% trans 'Cancel' %}" ng-click="hideOpenBasedir()" type="button" class="btn btn-link" style="color: var(--danger-color);">
                                            <i class="fas fa-times" style="font-size: 20px;"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-6">
                                        <button type="button" ng-click="applyOpenBasedirChanges()" class="btn btn-primary">
                                            <i class="fas fa-save"></i>
                                            {% trans "Apply Changes" %}
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="col-sm-3 control-label"></label>
                                    <div class="col-sm-6">
                                        <div ng-hide="operationFailed" class="alert alert-danger">
                                            <i class="fas fa-exclamation-circle"></i>
                                            <p>{% trans "Error message:" %} {$ errorMessage $}</p>
                                        </div>

                                        <div ng-hide="operationSuccessfull" class="alert alert-success">
                                            <i class="fas fa-check-circle"></i>
                                            <p>{% trans "Changes successfully saved." %}</p>
                                        </div>

                                        <div ng-hide="couldNotConnect" class="alert alert-danger">
                                            <i class="fas fa-wifi"></i>
                                            <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--- HTML To change open_basedir --->
                    </div>
                </div>
            </div>

            <div class="example-box-wrapper">
                <div class="content-box">
                    <h3 class="content-box-header">
                        <span>
                            <i class="fas fa-box" style="color: var(--primary-color); margin-right: 10px;"></i>
                            {% trans "Application Installer" %}
                        </span>
                    </h3>

                    <div class="content-box-wrapper">
                        <div class="row">
                            <div class="col-md-4">
                                <a href="{$ wordPressInstallURL $}" target="_blank" class="icon-box"
                                   title="{% trans 'Install WordPress with LSCache' %}">
                                    <i class="fab fa-wordpress" style="font-size: 48px; color: #21759b;"></i>
                                    <span class="h4">{% trans "WP + LSCache" %}</span>
                                </a>
                            </div>

                            <div class="col-md-4">
                                <a href="/websites/{{ childDomain }}/manageGIT" target="_blank" class="icon-box"
                                   title="{% trans 'Attach Git with this website!' %}">
                                    <i class="fab fa-git-alt" style="font-size: 48px; color: #f05032;"></i>
                                    <span class="h4">{% trans "Git" %}</span>
                                </a>
                            </div>

                            <div class="col-md-4">
                                <a href="{$ installPrestaURL $}" target="_blank" class="icon-box"
                                   title="{% trans 'Install Prestashop' %}">
                                    <i class="fas fa-shopping-cart" style="font-size: 48px; color: var(--accent-color);"></i>
                                    <span class="h4">{% trans "Prestashop" %}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% else %}
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle"></i>
                <p>{{ domain }}</p>
            </div>
        {% endif %}


    </div>

    </div>

{% endblock %}