{% extends 'settings/layout.html' %}
{% load i18n %}

{% block title %}{% trans "Site Settings" %}{% endblock %}

{% block header %}{% trans "Site Settings" %}{% endblock %}

{% block site-subtabs %}
<ul class="menu-list">
    <li><a href="#instance-info">{% trans "Instance Info" %}</a></li>
    <li><a href="#display">{% trans "Display" %}</a></li>
    <li><a href="#footer">{% trans "Footer Content" %}</a></li>
</ul>
{% endblock %}

{% block panel %}
{% if success %}
<div class="notification is-success is-light">
    <span class="icon icon-check" aria-hidden="true"></span>
    <span>
        {% trans "Settings saved" %}
    </span>
</div>
{% endif %}

{% if site_form.errors %}
<div class="notification is-danger is-light">
    <span class="icon icon-x" aria-hidden="true"></span>
    <span>
        {% trans "Unable to save settings" %}
    </span>
</div>
{% endif %}

<form
    action="{% url 'settings-site' %}"
    method="POST"
    class="content"
    enctype="multipart/form-data"
>
    {% csrf_token %}
    <section class="block" id="instance_info">
        <h2 class="title is-4">{% trans "Instance Info" %}</h2>
        <div class="box">
            <div class="field">
                <label class="label" for="id_name">{% trans "Instance Name:" %}</label>
                {{ site_form.name }}
            </div>
            <div class="field">
                <label class="label" for="id_instance_tagline">{% trans "Tagline:" %}</label>
                {{ site_form.instance_tagline }}
            </div>
            <div class="field">
                <label class="label" for="id_instance_description">{% trans "Instance description:" %}</label>
                {{ site_form.instance_description }}
            </div>
            <div class="field">
                <label class="label mb-0" for="id_instance_short_description">{% trans "Short description:" %}</label>
                <p class="help" id="desc_instance_short_description">{% trans "Used when the instance is previewed on joinbookwyrm.com. Does not support HTML or Markdown." %}</p>
                {{ site_form.instance_short_description }}
            </div>
            <div class="field">
                <label class="label" for="id_code_of_conduct">{% trans "Code of conduct:" %}</label>
                {{ site_form.code_of_conduct }}
            </div>
            <div class="field">
                <label class="label" for="id_privacy_policy">{% trans "Privacy Policy:" %}</label>
                {{ site_form.privacy_policy }}
            </div>

            <div class="field">
                <label class="label" for="id_impressum">{% trans "Impressum:" %}</label>
                {{ site_form.impressum }}
            </div>
            <div class="field is-horizontal">
                <div class="field mr-2">
                    <label class="label" for="id_show_impressum">{% trans "Include impressum:" %}</label>
                </div>
                <div class="control">
                {{ site_form.show_impressum }}
                </div>
            </div>
        </div>
    </section>

    <hr aria-hidden="true">

    <section class="block" id="display">
        <h2 class="title is-4">{% trans "Display" %}</h2>
        <div class="box">
            <h3 class="title is-5">{% trans "Images" %}</h3>
            <div class="block is-flex">
                <div>
                    <label class="label" for="id_logo">{% trans "Logo:" %}</label>
                    {{ site_form.logo }}
                </div>
                <div>
                    <label class="label" for="id_logo_small">{% trans "Logo small:" %}</label>
                    {{ site_form.logo_small }}
                </div>
                <div>
                    <label class="label" for="id_favicon">{% trans "Favicon:" %}</label>
                    {{ site_form.favicon }}
                </div>
            </div>

            <h3 class="title is-5">{% trans "Themes" %}</h3>
            <div class="block">
                <label class="label" for="id_default_theme">
                    {% trans "Default theme:" %}
                </label>
                <div class="select">
                    {{ site_form.default_theme }}
                </div>
            </div>
        </div>
    </section>

    <hr aria-hidden="true">

    <section class="block" id="footer">
        <h2 class="title is-4">{% trans "Footer Content" %}</h2>
        <div class="box">
            <div class="field">
                <label class="label" for="id_support_link">{% trans "Support link:" %}</label>
                <input type="text" name="support_link" maxlength="255" class="input" id="id_support_link" placeholder="https://www.patreon.com/bookwyrm"{% if site.support_link %} value="{{ site.support_link  }}"{% endif %}>
            </div>
            <div class="field">
                <label class="label" for="id_support_title">{% trans "Support title:" %}</label>
                <input type="text" name="support_title" maxlength="100" class="input" id="id_support_title" placeholder="Patreon"{% if site.support_title %} value="{{ site.support_title }}"{% endif %}>
            </div>
            <div class="field">
                <label class="label" for="id_admin_email">{% trans "Admin email:" %}</label>
                {{ site_form.admin_email }}
            </div>
            <div class="field">
                <label class="label" for="id_footer_item">{% trans "Additional info:" %}</label>
                {{ site_form.footer_item }}
            </div>
        </div>
    </section>

    <footer class="block">
        <button class="button is-primary" type="submit">{% trans "Save" %}</button>
    </footer>
</form>
{% endblock %}
