{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}
{% block meta_title %}{{ 'Embed parts of FOSSBilling'|trans }}{% endblock %}
{% set active_menu = 'system' %}

{% block content %}

    <div class="card">
        <div class="card-header">
            <div>
                <div class="card-title">{{ 'Embed parts'|trans }}</div>
                <p class="card-subtitle">{{ 'Copy and paste the embed code to your website'|trans }}</p>
            </div>
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label for="client-login-form" class="form-label">{{ 'Client area login form'|trans }}</label>
                <div class="input-group input-group-flat">
                    <input id="client-login-form" type="text" class="form-control" autocomplete="off" readonly
                           value='<iframe width="215" height="200" src="{{ 'embed/loginform'|link }}" frameborder="0"></iframe>'>
                    <span class="input-group-text">
                <span class="link-secondary cursor-pointer clipboard-copy" data-clipboard-target="#client-login-form"
                      data-bs-toggle="tooltip" aria-label="{{ 'Copy'|trans }}" data-bs-original-title="Copy">
                    <svg class="icon">
                        <use xlink:href="#copy" />
                    </svg>
                </span>
            </span>
                </div>
            </div>
            <div class="mb-3">
                <label for="domain-checker-form" class="form-label">{{ 'Domain checker form'|trans }}</label>
                <div class="input-group input-group-flat">
                    <input id="domain-checker-form" type="text" class="form-control" autocomplete="off" readonly
                           value='<iframe width="360" height="75" src="{{ 'embed/domainchecker'|link }}" frameborder="0"></iframe>'>
                    <span class="input-group-text">
                <span class="link-secondary cursor-pointer clipboard-copy" data-clipboard-target="#domain-checker-form"
                      data-bs-toggle="tooltip" aria-label="{{ 'Copy'|trans }}" data-bs-original-title="{{ 'Copy'|trans }}">
                    <svg class="icon">
                        <use xlink:href="#copy" />
                    </svg>
                </span>
            </span>
                </div>
            </div>
            <div class="mb-3">
                <label for="contact-us-form" class="form-label">{{ 'Contact us form'|trans }}</label>
                <div class="input-group input-group-flat">
                    <input id="contact-us-form" type="text" class="form-control" autocomplete="off" readonly
                           value='<iframe width="400" height="310" src="{{ 'embed/contact'|link }}" frameborder="0"></iframe>'>
                    <span class="input-group-text">
                <span class="link-secondary cursor-pointer clipboard-copy" data-clipboard-target="#contact-us-form"
                      data-bs-toggle="tooltip" aria-label="{{ 'Copy'|trans }}" data-bs-original-title="{{ 'Copy'|trans }}">
                    <svg class="icon">
                        <use xlink:href="#copy" />
                    </svg>
                </span>
            </span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
