{% extends 'sections/visitors/layout.html' %}

{% set menu = script.getSlug() %}

{% block content %}
    {% set name = script.getName() %}
    <h1>{% trans %}{{ name }} - Install - Step 1{% endtrans %}</h1>
    <p data-url="{{ urlFor('domain_php') }}" id="get_php_details" >
        {% set image = '<img class="required-image" src="' ~ url ~ '/themes/' ~ setting_ui_theme ~ '/images/required_star.png">' %}
        <strong>{% trans %}Note:{% endtrans %}</strong>
        {% trans %}Fields marked with a {{ image }} are required.{% endtrans %}
    </p>
    {{ form|raw }}
    <template>
        <table class="borderless">
            <tr>
                <td>
                    <strong>
                        <span class="badge"></span>
                        <span class="themely">Free Themes</span>
                        &nbsp;
                    </strong>
                </td>
                <td>
                    <strong>
                        <a class="themely-link" href="https://www.themely.com" target="_blank">Powered by Themely</a>
                        &nbsp;
                    </strong>
                </td>
            </tr>
            <tr>
                <td>
                <span>
                    <strong> Beautiful, secure </strong> and
                    <strong> easy-to-use </strong>
                    WordPress themes from the most talented creators around the world. All themes are licensed GNU GPL and completely free for personal or commercial use. Find preview and
                    <strong> select the perfect theme to install </strong>
                    for your new site.
                </span>
                <td>
                    <input
                        class="pull-right"
                        id="search-input-themely"
                        onkeyup="searchThemely()"
                        placeholder="Search themes..."
                        type="text"
                    />
                </td>
            </tr>
        </table>
    </template>
    <template>
        <div class="themely-theme">
            <div class="accordion">
            </div>
        </div>
    </template>
    <template>
        <div class="item">
            <div class="themely-summary">
                <a class="preview-url" target="_blank">
                    <img width="100%"/>
                </a>

                <div
                    class="row"
                    data-name
                    data-slug
                    data-preview
                    data-thumbnail
                    data-url
                >
                    <div class="col-sm-2 heading text-truncate nomargin-right">
                        <strong></strong>
                        <br><em>by&nbsp;</em><span></span>
                    </div>
                    <p class="themely-description"></p>
                    <a
                        class="col-sm-3 button btn-sm reset preview-url nomargin-left"
                        target="_blank"
                    >
                        Preview
                    </a>
                    <a
                        class="col-sm-3 themely-select-theme button btn-sm submit nomargin-left"
                        onClick="themely(event)"
                    >
                        Select
                    </a>
                </div>
            </div>
        </div>
    </template>
{% endblock %}