{% extends "baseTemplate/newBase.html" %}
{% load i18n %}
{% block titleNew %}{% trans "Home - CyberPanel" %}{% endblock %}
{% block newContent %}

    {% load static %}

    <div ng-controller="websitePagesV2" class="p-8">
        <div class="flex lg:flex-row justify-between items-center sm:flex-col">
            <div>
                <p id="domainNamePageV2" class="text-4xl font-bold">{{ domain }}</p>
                <p class="text-xs text-gray-600 py-2 font-semibold">All functions related to a particular site.
                </p>
            </div>
            <div>
                <div class="sm:mt-6">
                    <a target="_blank" href="{$ previewUrl $}"
                       class="bg-orange-500 px-3 py-3 rounded-lg text-xl font-semibold text-white">Preview
                    </a>
                </div>
            </div>
        </div>
        {% if not error %}
            <div class="py-8">
                <div class="py-4">
                    <p class="text-xl font-bold">Resources Usage</p>
                </div>
                <div class="flex lg:flex-row sm:flex-col gap-4">
                    <div class="sm:mt-6">
                        <a href="/websites/{{ domain }}/sshAccess"
                           class="bg-orange-500 px-3 py-3 rounded-lg text-xl font-semibold text-white">Set Up
                            SSH/SFTP
                            Access
                        </a>
                    </div>
                    <div class="sm:mt-6">
                        <a href="/websites/{{ domain }}/setupStaging"
                           class="bg-orange-500 px-3 py-3 rounded-lg text-xl font-semibold text-white">Clone/Staging
                        </a>
                    </div>
                    <div class="sm:mt-6">
                        <a href="/websites/{{ domain }}/manageGIT"
                           class="bg-orange-500 px-3 py-3 rounded-lg text-xl font-semibold text-white">Manage Git
                        </a>
                    </div>
                    <div class="sm:mt-6">
                        <a href="https://go.cyberpanel.net/StessTest"
                           class="bg-orange-500 px-3 py-3 rounded-lg text-xl font-semibold text-white">Stress Test
                        </a>
                    </div>
                </div>
                <div class="mt-6">
                    <hr>
                </div>
                <table class="table-fixed w-full overflow-x-auto">
                    <thead>
                    <tr class="bg-gray-200 border text-xl font-bold text-orange-400">
                        <td class="px-4 py-2">Resources</td>
                        <td>Usage</td>
                        <td>Allowed</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="border font-semibold">
                        <td class="px-4 py-2">FTP</td>
                        <td>{{ ftpUsed }}</td>
                        <td>{{ ftpTotal }}</td>
                    </tr>
                    <tr class="bg-gray-200 border font-semibold">
                        <td class="px-4 py-2">Databases</td>
                        <td>{{ databasesUsed }}</td>
                        <td>{{ databasesTotal }}</td>
                    </tr>
                    <tr class="border font-semibold">
                        <td class="px-4 py-2">Disk Usage</td>
                        <td>{{ diskInMB }} (MB)</td>
                        <td>{{ diskInMBTotal }} (MB)</td>
                    </tr>
                    <tr class="bg-gray-200 border font-semibold">
                        <td class="px-4 py-2">Bandwidth Usage</td>
                        <td>{{ bwInMB }} (MB)</td>
                        <td>{{ bwInMBTotal }} (MB)</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="mt-4 border shadow-lg">
                <div class="flex justify-between bg-gray-600 p-2 w-full">
                    <div>
                        <p class="text-white px-6 text-xl font-bold">Logs</p>
                    </div>
                    <div>
                        <svg id="icon2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white mr-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
                        </svg>
                    </div>
                </div>
                <div>
                    <ul class="flex w-full grid lg:grid-cols-4">
                        <li ng-click="fetchLogs(1)" class="px-3 py-3 cursor-pointer">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Access Logs</p>
                                    <img ng-hide="logFileLoading" src="/static/images/loading.gif">
                                </div>
                            </div>
                        </li>
                        <li ng-click="fetchErrorLogs(1)" class="px-3 py-3 cursor-pointer">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Error Logs</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="col-md-12">
                        <form ng-hide="hideLogs" class="form-horizontal bordered-row">
                            <div ng-hide="logsFeteched"
                                 class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "Logs Fetched" %}</p>
                            </div>
                            <div ng-hide="couldNotFetchLogs"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not fetch logs, see the logs file through command line. Error message:" %}
                                    {$ errorMessage $}</p>
                            </div>
                            <div ng-hide="couldNotConnect"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                            </div>
                            <div ng-hide="fetchedData" class="mx-10">
                                <div class="flex gap-4 mt-3 justify-center">
                                    <div class="col-sm-3">
                                        <input placeholder="Search..." ng-model="logSearch" name="dom" type="text"
                                               class="w-80 bg-gray-100 rounded px-2 py-1" ng-model="domainNameCreate"
                                               required>
                                    </div>
                                    <div class="col-sm-2">
                                        <input placeholder="Page Number" type="number"
                                               class="w-80 bg-gray-100 rounded px-2 py-1"
                                               ng-model="pageNumber" required>
                                    </div>
                                    <button ng-click="fetchLogs(3)" type="button"
                                            class="bg-orange-500 text-white font-bold px-2 py-1">{% trans "Next" %}</button>
                                    <button ng-click="fetchLogs(4)" type="button"
                                            class="bg-orange-500 text-white font-bold px-2 py-1">{% trans "Previous" %}</button>
                                    <a ng-click="hidelogsbtn()" href="">
                                        <h3 class="bg-red-500 px-2 py-1 rounded-lg text-white">
                                            X</h3>
                                    </a>
                                </div>


                                <div ng-hide="currentRecords" class="relative py-5 overflow-x-auto">
                                    <table class="w-full text-sm text-left rtl:text-right">
                                        <thead>
                                        <tr>
                                            <th scope="col" class="px-6 py-3">
                                                Type
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                IP Address
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                Time
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                Resource
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                Size
                                            </th>
                                        </tr>
                                        </thead>
                                        <hr>
                                        <tbody ng-repeat="record in records | filter:logSearch"
                                               class="border shadow-lg py-3 px-6 rounded-b-lg">
                                        <tr>
                                            <td ng-bind="record.domain" class="px-8 py-4 font-bold">
                                            </td>
                                            <td ng-bind="record.ipAddress" class="px-6 py-4">
                                            </td>
                                            <td ng-bind="record.time" class="px-6 py-4">
                                            </td>
                                            <td ng-bind="record.resource" class="px-6 py-4">
                                            </td>
                                            <td ng-bind="record.size" class="px-6 py-4">
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>


                            <div ng-hide="hideErrorLogs" class="">
                                <div class="flex gap-4 mt-3 justify-center items-center">
                                    <div>
                                        <input placeholder="Page Number" type="number"
                                               class="w-80 bg-gray-100 rounded px-2 py-1"
                                               ng-model="errorPageNumber" required>
                                    </div>
                                    <button ng-click="fetchErrorLogs(3)" type="button"
                                            class="bg-orange-500 text-white font-bold px-2 py-1">{% trans "Next" %}</button>
                                    <button ng-click="fetchErrorLogs(4)" type="button"
                                            class="bg-orange-500 text-white font-bold px-2 py-1">{% trans "Previous" %}</button>
                                    <div>
                                        <a ng-click="hideErrorLogsbtn()" href="">
                                            <h3 class="bg-red-500 px-2 py-1 rounded-lg text-white">
                                                X</h3>
                                        </a>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <textarea ng-model="errorLogsData" rows="25"
                                              class="w-full bg-gray-100 rounded px-2 py-1"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="mt-4 border shadow-lg">
                <div class="flex justify-between bg-gray-600 p-2 w-full">
                    <div>
                        <p class="text-white px-6 text-xl font-bold">Domains</p>
                    </div>
                    <div>
                        <svg id="icon2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white mr-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
                        </svg>
                    </div>
                </div>
                <div>
                    <ul class="flex w-full grid lg:grid-cols-4">
                        <a href="{% url 'CreateNewDomainV2' %}" class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Add Domains</p>
                                </div>
                            </div>
                        </a>
                        <li ng-click="showListDomains()" class="px-3 py-3 cursor-pointer">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">List Domains</p>
                                </div>
                            </div>
                        </li>
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                        <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Domain Alias</p>
                                </div>
                            </div>
                        </li>
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>

                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M38.3333 12.5L29.4999 21.6667L24.8333 17" stroke="#FF9A00"
                                              stroke-width="2" stroke-miterlimit="10"/>
                                        <path
                                                d="M14.9999 20.0001C18.6818 20.0001 21.6666 17.0153 21.6666 13.3334C21.6666 9.65152 18.6818 6.66675 14.9999 6.66675C11.318 6.66675 8.33325 9.65152 8.33325 13.3334C8.33325 17.0153 11.318 20.0001 14.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M15.0001 23.3333C4.83341 23.3333 1.66675 29.9999 1.66675 29.9999V33.3333H28.3334V29.9999C28.3334 29.9999 25.1667 23.3333 15.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Cron Jobs</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    {#                List Domains HTML#}
                    <div id="listDomains" class="col-md-12 mx-10">
                        <form ng-hide="" class="form-horizontal bordered-row">
                            <div ng-hide="phpChanged" class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "PHP Version Changed to:" %} {$ changedPHPVersion $} </p>
                            </div>
                            <div ng-hide="domainDeleted"
                                 class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "Deleted:" %} {$ deletedDomain $} </p>
                            </div>
                            <div ng-hide="sslIssued" class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "SSL Issued:" %} {$ sslDomainIssued $} </p>
                            </div>
                            <div ng-hide="childBaseDirChanged"
                                 class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "Changes applied successfully." %} </p>
                            </div>
                            <div ng-hide="domainError"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{$ errorMessage $}</p>
                            </div>
                            <div ng-hide="couldNotConnect"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                            </div>


                            <div>
                                <div class="flex gap-4">
                                    <div class="w-full">
                                        <input placeholder="Search Domain..." ng-model="logSearch" name="dom"
                                               type="text" class="w-full bg-gray-100 rounded px-2 py-1"
                                               ng-model="domainNameCreate"
                                               required>
                                    </div>
                                    <div>
                                        <a title="{% trans 'Close' %}" ng-click="hideListDomains()" href="">
                                            <h3 class="bg-red-500 px-2 py-1 rounded-lg text-white">
                                                X</h3>
                                        </a>
                                    </div>
                                </div>
                                <div ng-hide="currentRecords" class="relative py-5 overflow-x-auto">
                                    <table class="w-full text-sm text-left rtl:text-right">
                                        <thead>
                                        <tr>
                                            <th scope="col" class="px-6 py-3">
                                                Domain
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                Launch
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                Path
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                open_basedir
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                PHP
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                SSL
                                            </th>
                                            <th scope="col" class="px-6 py-3">
                                                Delete
                                            </th>
                                        </tr>
                                        </thead>
                                        <hr>
                                        <tbody ng-repeat="record in childDomains | filter:logSearch"
                                               class="border shadow-lg py-3 px-6 rounded-b-lg">
                                        <tr>
                                            <td ng-bind="record.childDomain" class="px-8 py-4 font-bold">
                                            </td>
                                            <td class="px-6 py-4">
                                                <a href="{$ record.childLunch $}"><img width="30px" height="30"
                                                                                       class="center-block"
                                                                                       src="{% static 'baseTemplate/assets/image-resources/webPanel.png' %}"></a>
                                            </td>
                                            <td ng-bind="record.path" class="px-6 py-4">
                                            </td>
                                            <td class="px-6 py-4">
                                                <select ng-change="changeChildBaseDir(record.childDomain,childBaseDir)"
                                                        ng-model="childBaseDir"
                                                        class="w-20 bg-gray-100 rounded px-2 py-1">
                                                    <option>Enable</option>
                                                    <option>Disable</option>
                                                </select>
                                            </td>
                                            <td class="px-6 py-4">
                                                <select ng-change="changePHP(record.childDomain,phpSelection)"
                                                        ng-model="phpSelection"
                                                        class="w-20 bg-gray-100 rounded px-2 py-1">
                                                    {% for php in phps %}
                                                        <option>{{ php }}</option>
                                                    {% endfor %}
                                                </select>
                                            </td>
                                            <td class="px-6 py-4">
                                                <button type="button"
                                                        ng-click="issueSSL(record.childDomain,record.path)"
                                                        class="btn ra-50 btn-primary">{% trans "Issue" %}</button>
                                            </td>
                                            <td class="px-6 py-4">
                                                <button type="button"
                                                        ng-click="deleteChildDomain(record.childDomain)"
                                                        class="bg-red-500 px-2 py-1 rounded-lg text-white">{% trans "Delete" %}</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </form>
                    </div>
                    {#                List Domains HTML End#}
                </div>
            </div>
            <div class="mt-4 border shadow-lg">
                <div class="flex justify-between bg-gray-600 p-2 w-full">
                    <div>
                        <p class="text-white px-6 text-xl font-bold">Configuration</p>
                    </div>
                    <div>
                        <svg id="icon2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white mr-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
                        </svg>
                    </div>
                </div>
                <div>
                    <ul class="flex w-full grid lg:grid-cols-4">
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Apache Manager</p>
                                </div>
                            </div>
                        </li>
                        <li ng-click="fetchConfigurations()" class="px-3 py-3 cursor-pointer">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">VHost Conf</p>
                                </div>
                            </div>
                        </li>
                        <li ng-click="fetchRewriteFules()" class="px-3 py-3 cursor-pointer">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                        <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Rewrite rules</p>
                                </div>
                            </div>
                        </li>
                        <li ng-click="addSSL()" class="px-3 py-3 cursor-pointer">
                            <div class="flex items-center">
                                <div>

                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M38.3333 12.5L29.4999 21.6667L24.8333 17" stroke="#FF9A00"
                                              stroke-width="2" stroke-miterlimit="10"/>
                                        <path
                                                d="M14.9999 20.0001C18.6818 20.0001 21.6666 17.0153 21.6666 13.3334C21.6666 9.65152 18.6818 6.66675 14.9999 6.66675C11.318 6.66675 8.33325 9.65152 8.33325 13.3334C8.33325 17.0153 11.318 20.0001 14.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M15.0001 23.3333C4.83341 23.3333 1.66675 29.9999 1.66675 29.9999V33.3333H28.3334V29.9999C28.3334 29.9999 25.1667 23.3333 15.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Add SSL</p>
                                </div>
                            </div>
                        </li>
                        <li ng-click="changePHPMaster()" class="px-3 py-3 cursor-pointer">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_55_1903)">
                                            <path
                                                    d="M10 31.6667C10 33.5083 11.4917 35 13.3334 35H26.6667C28.5084 35 30 33.5083 30 31.6667V11.6667H10V31.6667ZM31.6667 6.66667H25.8334L24.1667 5H15.8334L14.1667 6.66667H8.33337V10H31.6667V6.66667Z"
                                                    fill="#FF9A00"/>
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_55_1903">
                                                <rect width="40" height="40" fill="white"/>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Change PHP</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    {#                    Vhost Conf HTML#}
                    <div class="col-md-12">
                        <form ng-hide="configurationsBox" class="form-horizontal bordered-row">
                            <div ng-hide="configsFetched"
                                 class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "Current configuration in the file fetched." %}</p>
                            </div>

                            <div ng-hide="couldNotFetchConfigs"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not fetch current configuration. Error message:" %} {$
                                    errorMessage $}</p>
                            </div>

                            <div ng-hide="couldNotConnect"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                            </div>

                            <div ng-hide="configSaved" class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "Configurations saved." %}</p>
                            </div>

                            <div ng-hide="couldNotSaveConfigurations"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not fetch current configuration. Error message:" %} {$
                                    errorMessage $}</p>
                            </div>

                            <div ng-hide="fetchedConfigsData">
                                <div style="margin-bottom: 1%;" class="flex justify-end py-2 px-2">
                                    <a ng-click="hideconfigbtn()" href=""><img
                                            src="/static/images/close-32.png"></a>
                                </div>
                                <div class="col-sm-12">
                                    <textarea ng-model="configData" rows="20"
                                              class="w-full bg-gray-100 rounded px-2 py-1"></textarea>
                                </div>
                            </div>

                            <div ng-hide="saveConfigBtn" class="flex justify-center py-2">
                                <div class="col-sm-4">
                                    <button type="button" ng-click="saveCongiruations()"
                                            class="bg-orange-500 px-3 py-2 rounded-lg font-semibold text-white">{% trans "Save" %}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    {#                    Vhost Conf HTML End#}
                    {#                    Rewrite Rules HTML#}
                    <div class="col-md-12">
                        <form ng-hide="configurationsBoxRewrite" class="form-horizontal bordered-row">
                            <div ng-hide="rewriteRulesFetched"
                                 class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "It is not required to modify rules if you are using OpenLiteSpeed." %}
                                    <a target="_blank"
                                       href="http://go.cyberpanel.net/cyber9bed2">Click</a>
                                    to read more about whats changed in <a target="_blank"
                                                                           href="http://go.cyberpanel.net/rewrite">rewrite
                                        rules</a> from v1.8 onwards.</p>
                            </div>

                            <form name="websiteCreationForm" action="/" id="createPackages">

                                <div ng-hide="fetchedRewriteRules" class="flex justify-center items-center mt-4">
                                    <p class="font-semibold mr-5">Select Template</p>
                                    <div class="col-sm-6">
                                        <select ng-change="applyRewriteTemplate()" ng-model="rewriteTemplate"
                                                class="w-full bg-gray-100 rounded px-2 py-1">
                                            <option>Force HTTP -> HTTPS</option>
                                            <option>Force WWW -> NON-WWW</option>
                                            <option>Force NON-WWW -> WWW</option>
                                            <option>Disable Wordpress XMLRPC & Trackback</option>
                                        </select>
                                    </div>
                                </div>

                            </form>

                            <div ng-hide="couldNotFetchRewriteRules"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not fetch current rewrite rules. Error message:" %} {$
                                    errorMessage $}</p>
                            </div>

                            <div ng-hide="couldNotConnect"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                            </div>

                            <div ng-hide="rewriteRulesSaved"
                                 class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "Configurations saved." %}</p>
                            </div>

                            <div ng-hide="couldNotSaveRewriteRules"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not save rewrite rules. Error message:" %} {$ errorMessage
                                    $}</p>
                            </div>

                            <div ng-hide="fetchedRewriteRules">
                                <div style="margin-bottom: 1%;" class="flex justify-end py-2 px-2">
                                    <a ng-click="hideRewriteRulesbtn()" href=""><img
                                            src="/static/images/close-32.png"></a>
                                </div>
                                <div class="col-sm-12">
                                    <textarea ng-model="rewriteRules" rows="10"
                                              class="w-full bg-gray-100 rounded px-2 py-1"></textarea>
                                </div>
                            </div>
                            <div ng-hide="saveRewriteRulesBTN" class="flex justify-center py-2">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-4">
                                    <button style="margin-top: 5%" type="button" ng-click="saveRewriteRules()"
                                            class="bg-orange-500 px-3 py-2 rounded-lg font-semibold text-white">{% trans "Save Rewrite Rules" %}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    {#                    Rewrite Rules HTML End#}
                    {#                    Add SSL HTML#}
                    <div class="col-md-12">
                        <form ng-hide="hidsslconfigs" class="form-horizontal bordered-row">
                            <div ng-hide="sslSaved" class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                <p>{% trans "SSL Saved" %}</p>
                            </div>
                            <div ng-hide="couldNotSaveSSL"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not save SSL. Error message:" %} {$ errorMessage $}</p>
                            </div>
                            <div ng-hide="couldNotConnect"
                                 class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                            </div>
                            <div ng-hide="">
                                <div style="margin-bottom: 1%;" class="flex justify-end py-2 px-2">
                                    <a ng-click="hidesslbtn()" href=""><img
                                            src="/static/images/close-32.png"></a>
                                </div>
                                <div class="flex gap-2 justify-center">
                                    <div>
                                            <textarea placeholder="Paste Your Cert" ng-model="cert" rows="10"
                                                      class="md:w-96 sm:w-full bg-gray-100 rounded px-2 py-1"></textarea>
                                    </div>
                                    <div>
                                            <textarea placeholder="Paste Your Key" ng-model="key" rows="10"
                                                      class="md:w-96 sm:w-full bg-gray-100 rounded px-2 py-1"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div ng-hide="" class="flex justify-center py-2">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-4">
                                    <button type="button" ng-click="saveSSL()"
                                            class="bg-orange-500 px-3 py-2 rounded-lg font-semibold text-white">{% trans "Save" %}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    {#                    Add SSL HTML End#}
                    {#                    Change PHP HTML#}
                    <div class="col-md-12">
                        <form ng-hide="changePHPView" name="" action="/" class="form-horizontal bordered-row">
                            <div class="form-group">
                                <div style="margin-bottom: 1%;" class="flex justify-end py-2 px-2">
                                    <a title="{% trans 'Cancel' %}" ng-click="hideChangePHPMaster()"
                                       href=""><h3 class="bg-red-500 px-2 py-1 rounded-lg text-white">
                                        X</h3></a>
                                </div>
                                <div class="flex justify-center items-center mt-4">
                                    <p class="font-semibold mr-5">Select PHP</p>
                                    <div>
                                        <select ng-model="phpSelectionMaster"
                                                class="w-80 bg-gray-100 rounded px-2 py-1">
                                            {% for php in phps %}
                                                <option>{{ php }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-center py-2">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-4">
                                    <button type="button" ng-click="changePHPVersionMaster()"
                                            class="bg-orange-500 px-3 py-2 rounded-lg font-semibold text-white">{% 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="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                        <p>{% trans "Failed to change PHP version. Error message:" %} {$
                                            errorMessage $}</p>
                                    </div>
                                    <div ng-hide="phpChangedMaster"
                                         class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                        <p>{% trans "PHP successfully changed for: " %} <strong>{$ websiteDomain
                                            $}</strong></p>
                                    </div>
                                    <div ng-hide="couldNotConnect"
                                         class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                        <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    {#                Change PHP HTML End#}
                </div>
            </div>
            <div class="mt-4 border shadow-lg">
                <div class="flex justify-between bg-gray-600 p-2 w-full">
                    <div>
                        <p class="text-white px-6 text-xl font-bold">Files</p>
                    </div>
                    <div>
                        <svg id="icon2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white mr-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
                        </svg>
                    </div>
                </div>
                <div>
                    <ul class="flex w-full grid lg:grid-cols-4">
                        <a href="{$ fileManagerURLV2 $}" class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">File Manager</p>
                                </div>
                            </div>
                        </a>
                        <li ng-click="openBaseDirView()" class="px-3 py-3 cursor-pointer">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Open_basedir</p>
                                </div>
                            </div>
                        </li>
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                        <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Create FTP Account</p>
                                </div>
                            </div>
                        </li>
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>

                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M38.3333 12.5L29.4999 21.6667L24.8333 17" stroke="#FF9A00"
                                              stroke-width="2" stroke-miterlimit="10"/>
                                        <path
                                                d="M14.9999 20.0001C18.6818 20.0001 21.6666 17.0153 21.6666 13.3334C21.6666 9.65152 18.6818 6.66675 14.9999 6.66675C11.318 6.66675 8.33325 9.65152 8.33325 13.3334C8.33325 17.0153 11.318 20.0001 14.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M15.0001 23.3333C4.83341 23.3333 1.66675 29.9999 1.66675 29.9999V33.3333H28.3334V29.9999C28.3334 29.9999 25.1667 23.3333 15.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Delete FTP Account</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    {#                    open_basedir HTML#}
                    <div ng-hide="openBaseDirBox" class="col-md-12">
                        <form action="/" class="form-horizontal bordered-row">
                            <div class="form-group">
                                <div class="flex justify-end px-2">
                                    <a title="{% trans 'Cancel' %}" ng-click="hideOpenBasedir()" href=""><img
                                            src="/static/images/close-32.png"></a>
                                </div>
                                <div class="flex justify-center items-center mt-4">
                                    <P class="font-semibold mr-5">open_basedir Protection</P>
                                    <div ng-hide="baseDirLoading" style="margin-bottom: 1%;" class=" col-sm-1">
                                        <img src="{% static 'images/loading.gif' %}">
                                    </div>
                                    <div class="col-sm-6">
                                        <select ng-model="openBasedirValue" class="w-80 bg-gray-100 rounded px-2 py-1">
                                            <option>Enable</option>
                                            <option>Disable</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-center py-2">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-4">
                                    <button type="button" ng-click="applyOpenBasedirChanges()"
                                            class="bg-orange-500 px-3 py-2 rounded-lg font-semibold text-white">{% trans "Apply Changes" %}</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-4">
                                    <div ng-hide="operationFailed"
                                         class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                        <p>{% trans "Error message:" %} {$ errorMessage $} </p>
                                    </div>
                                    <div ng-hide="operationSuccessfull"
                                         class="flex justify-center bg-green-500 px-2 py-1 font-semibold">
                                        <p>{% trans "Changes successfully saved." %}</p>
                                    </div>
                                    <div ng-hide="couldNotConnect"
                                         class="flex justify-center bg-red-500 text-white px-2 py-1 font-semibold">
                                        <p>{% trans "Could not connect to server. Please refresh this page." %}</p>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    {#                    open_basedir HTML End#}
                </div>
            </div>
            <div class="mt-4 border shadow-lg">
                <div class="flex justify-between bg-gray-600 p-2 w-full">
                    <div>
                        <p class="text-white px-6 text-xl font-bold">Email Marketing</p>
                    </div>
                    <div>
                        <svg id="icon2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white mr-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
                        </svg>
                    </div>
                </div>
                <div>
                    <ul class="flex w-full grid lg:grid-cols-4">
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Create Lists</p>
                                </div>
                            </div>
                        </li>
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Manage Lists</p>
                                </div>
                            </div>
                        </li>
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                        <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">SMTP Hosts</p>
                                </div>
                            </div>
                        </li>
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>

                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M38.3333 12.5L29.4999 21.6667L24.8333 17" stroke="#FF9A00"
                                              stroke-width="2" stroke-miterlimit="10"/>
                                        <path
                                                d="M14.9999 20.0001C18.6818 20.0001 21.6666 17.0153 21.6666 13.3334C21.6666 9.65152 18.6818 6.66675 14.9999 6.66675C11.318 6.66675 8.33325 9.65152 8.33325 13.3334C8.33325 17.0153 11.318 20.0001 14.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M15.0001 23.3333C4.83341 23.3333 1.66675 29.9999 1.66675 29.9999V33.3333H28.3334V29.9999C28.3334 29.9999 25.1667 23.3333 15.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Compose</p>
                                </div>
                            </div>
                        </li>
                        <li class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <g clip-path="url(#clip0_55_1903)">
                                            <path
                                                    d="M10 31.6667C10 33.5083 11.4917 35 13.3334 35H26.6667C28.5084 35 30 33.5083 30 31.6667V11.6667H10V31.6667ZM31.6667 6.66667H25.8334L24.1667 5H15.8334L14.1667 6.66667H8.33337V10H31.6667V6.66667Z"
                                                    fill="#FF9A00"/>
                                        </g>
                                        <defs>
                                            <clipPath id="clip0_55_1903">
                                                <rect width="40" height="40" fill="white"/>
                                            </clipPath>
                                        </defs>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Send Emails</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mt-4 border shadow-lg">
                <div class="flex justify-between bg-gray-600 p-2 w-full">
                    <div>
                        <p class="text-white px-6 text-xl font-bold">Application Installer</p>
                    </div>
                    <div>
                        <svg id="icon2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                             stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-white mr-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
                        </svg>
                    </div>
                </div>
                <div>
                    <ul class="flex w-full grid lg:grid-cols-4">
                        <a href="{$ wordPressInstallURLV2 $}" class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">WP + LSCache</p>
                                </div>
                            </div>
                        </a>
                        <a href="{$ setupGitV2 $}" class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M20 23.3333C24.6023 23.3333 28.3333 18.8561 28.3333 13.3333C28.3333 7.8104 24.6023 3.33325 20 3.33325C15.3976 3.33325 11.6666 7.8104 11.6666 13.3333C11.6666 18.8561 15.3976 23.3333 20 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M36.3333 31.8331C34.8333 28.8331 32 26.3331 28.3333 24.8331C27.3333 24.4998 26.1666 24.4998 25.3333 24.9998C23.6666 25.9998 22 26.4998 20 26.4998C18 26.4998 16.3333 25.9998 14.6666 24.9998C13.8333 24.6665 12.6666 24.4998 11.6666 24.9998C7.99995 26.4998 5.16662 28.9998 3.66662 31.9998C2.49995 34.1665 4.33329 36.6665 6.83329 36.6665H33.1666C35.6666 36.6665 37.5 34.1665 36.3333 31.8331Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Git</p>
                                </div>
                            </div>
                        </a>
                        <a href="{$ installPrestaURLV2 $}" class="px-3 py-3">
                            <div class="flex items-center">
                                <div>
                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path
                                                d="M24.9999 20.0001C28.6818 20.0001 31.6666 17.0153 31.6666 13.3334C31.6666 9.65152 28.6818 6.66675 24.9999 6.66675C21.318 6.66675 18.3333 9.65152 18.3333 13.3334C18.3333 17.0153 21.318 20.0001 24.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M25.0001 23.3333C14.8334 23.3333 11.6667 29.9999 11.6667 29.9999V33.3333H38.3334V29.9999C38.3334 29.9999 35.1667 23.3333 25.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                        <path d="M8.33325 11.6667V25.0001" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                        <path d="M15.0001 18.3333H1.66675" stroke="#FF9A00" stroke-width="2"
                                              stroke-miterlimit="10"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Prestashop</p>
                                </div>
                            </div>
                        </a>
                        <a href="{$ installMauticURLV2 $}" class="px-3 py-3">
                            <div class="flex items-center">
                                <div>

                                    <svg width="20" height="20" viewBox="0 0 40 40" fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M38.3333 12.5L29.4999 21.6667L24.8333 17" stroke="#FF9A00"
                                              stroke-width="2" stroke-miterlimit="10"/>
                                        <path
                                                d="M14.9999 20.0001C18.6818 20.0001 21.6666 17.0153 21.6666 13.3334C21.6666 9.65152 18.6818 6.66675 14.9999 6.66675C11.318 6.66675 8.33325 9.65152 8.33325 13.3334C8.33325 17.0153 11.318 20.0001 14.9999 20.0001Z"
                                                fill="#FF9A00"/>
                                        <path
                                                d="M15.0001 23.3333C4.83341 23.3333 1.66675 29.9999 1.66675 29.9999V33.3333H28.3334V29.9999C28.3334 29.9999 25.1667 23.3333 15.0001 23.3333Z"
                                                fill="#FF9A00"/>
                                    </svg>
                                </div>
                                <div>
                                    <p class="px-2 font-bold" style="font-size: 70%;">Mautic</p>
                                </div>
                            </div>
                        </a>
                    </ul>
                </div>
            </div>
        {% else %}
            <div class="alert alert-danger">
                <p>{{ domain }}</p>
            </div>
        {% endif %}
    </div>
{% endblock %}