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

    {% load static %}
    {% get_current_language as LANGUAGE_CODE %}
    <!-- Current language: {{ LANGUAGE_CODE }} -->

    {% if PremStat %}
        <div class="container">
            <div id="page-title">
                <h2>{% trans "SSL v2" %} - <a target="_blank" href="https://youtu.be/kDUANNvtOwE"
                                              style="height: 23px;line-height: 21px;"
                                              class="btn btn-border btn-alt border-red btn-link font-red"
                                              title=""><span>{% trans "DNS Docs" %}</span></a></h2>
                <p>{% trans "On this page, you have the option to configure DNS providers that CyberPanel can utilize for issuing SSL certificates, providing enhanced flexibility and ease of renewal." %}</p>
                <p align="center" style="margin-top: 2%; margin-bottom: 2%">
                    <iframe width="788.54" height="443" src="https://www.youtube.com/embed/kDUANNvtOwE"
                            title="YouTube video player" frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen></iframe>
                </p>
            </div>
            <div ng-controller="sslIssueCtrlV2" class="panel">
                <div class="panel-body">
                    <h3 class="content-box-header">
                        {% trans "SSL v2" %}
                    </h3>
                    <div class="example-box-wrapper">
                        {% if SaveSuccess %}
                            <div class="form-group">
                                <label class="col-sm-3 control-label"></label>
                                <div class="col-sm-6">
                                    <div class="alert alert-success">
                                        <p>{% trans "Changes saved succesfully." %}</p>
                                    </div>
                                </div>
                            </div>
                        {% endif %}
                        <ul class="nav nav-tabs">

                            <li class="col-md-4 nav-item tab-mod active">
                                <a href="#tab-example-1" data-toggle="tab" class="h4 nav-link">
                                    <i class="fa fa-cog btn-icon"></i>
                                    <span>{% trans "Issue SSL" %}</span>
                                </a>

                            </li>
                            <li class="col-md-4 tab-mod nav-item">
                                <a href="#tab-example-3" data-toggle="tab" class="h4 nav-link">
                                    <i class="fa fa-cogs btn-icon"></i>
                                    <span>{% trans "API Settings" %}</span>
                                </a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane fade active in" id="tab-example-1">
                                <div class="example-box-wrapper">


                                    <form action="/" class="form-horizontal bordered-row panel-body">


                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">{% trans "Select Domain" %} </label>
                                            <div class="col-sm-6">
                                                <select ng-model="virtualHost"
                                                        class="form-control">
                                                    {% for items in websiteList %}
                                                        <option>{{ items }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="col-sm-4">
                                                <button style="width: 100%;" type="button"
                                                        ng-click="issueSSL()"
                                                        class="btn btn-primary">{% trans "Issue SSL" %} <img
                                                        ng-hide="manageSSLLoading"
                                                        src="{% static 'images/loading.gif' %}">
                                                </button>
                                            </div>

                                        </div>

                                        <div class="form-group">

                                            <div class="col-sm-12">
                                                <h3 style="margin: 2%">SSL Status: {$ sslStatus $}</h3>
                                                <div class="col-sm-12">
                                                    <textarea ng-model="sslLogs" class="form-control"
                                                              rows="20"></textarea>
                                                </div>
                                            </div>
                                        </div>

                                    </form>


                                </div>
                            </div>

                            <div class="tab-pane fade" id="tab-example-3">

                                <form method="post" action="{% url 'v2ManageSSL' %}"
                                      class="form-horizontal bordered-row panel-body">
                                    {% csrf_token %}

                                    <h2 style="margin-bottom: 2%">{% trans "Cloudflare Settings" %}</h2>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">{% trans "CloudFlare Email" %}</label>
                                        <div class="col-sm-6">
                                            <input name="SAVED_CF_Email" type="text" class="form-control"
                                                   value="{{ SAVED_CF_Email }}" required>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">{% trans "API Token" %}</label>
                                        <div class="col-sm-6">
                                            <input name="SAVED_CF_Key" type="text" class="form-control"
                                                   value="{{ SAVED_CF_Key }}" required>
                                        </div>
                                    </div>


                                    <div class="form-group">
                                        <label class="col-sm-3 control-label"></label>
                                        <div class="col-sm-4">
                                            <button type="submit"
                                                    class="btn btn-primary btn-lg">{% trans "Save" %}</button>

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

                            </div>
                        </div>


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


        </div>
    {% else %}
        <style>
            .feturecard {
                width: 30%;
                padding: 46px;
                margin: 15px
            }
        </style>
        <div class="container">
            <div id="page-title" align="center">
                <h1 style="color: black"><strong>SSLv2 Comes with Full Automation + Wildcard SSLs! </strong></h1>
                <p style="font-size: 15px; color: black; margin-top: 1%">Are you tired of the hassle that comes with
                    setting up SSL certificates for your website? Do you want a faster and easier way to secure your
                    website without the need for manual verification? <br><br>

                    Introducing CyberPanel's new feature, SSL v2! With SSL v2, you can automatically issue SSL
                    certificates using the ACME DNS verification method. This means that you no longer have to worry
                    about going through the manual process of verifying ownership of your domain. <br><br>

                    What's even better is that we've integrated two of the most popular domain registrars, Cloudflare
                    and Namecheap, so you can easily issue SSL certificates with just a few clicks. No more fiddling
                    around with complicated settings and DNS configurations! <br><br>

                    With SSL v2, you can rest easy knowing that your website is secure and your visitors' data is
                    protected. Don't wait any longer to upgrade your website's security - get SSL v2 today!<br></p>
            </div>
            <p align="center">
                <iframe width="788.54" height="443" src="https://www.youtube.com/embed/kDUANNvtOwE"
                        title="YouTube video player" frameborder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                        allowfullscreen></iframe>
            </p>
            <div style="margin-top: 2%">
                <stripe-pricing-table pricing-table-id="prctbl_1PhTRPRs6rG0dTDlJZMzTw0k"
                                      publishable-key="pk_live_51PgodkRs6rG0dTDl3jCUgxjyjI983GmCdHjzuLfZIsssmDLgKgnXnwQghVCctKMNFIC5K4oMcviTFrHf1ytsYZGa00AGySiWlF">
                </stripe-pricing-table>
            </div>

        </div>
    {% endif %}


{% endblock %}