{% extends "base.html" %}

{% block content %}
    <div class="block"><h1 class="title is-large">{{ _("Customise Portal") }}.</h1></div>
    <div class="block"><p class="subtitle"> {{ _("The URL is the address users will enter into a browser after they connect to the box network. From here, they can view the portal. This cannot be changed later.") }}</p></div>

<div class="block grid">
{% import "bulma_wtf.html" as wtf %}
    <form action="" method="post" enctype="multipart/form-data" novalidate >
        {{ form.hidden_tag() }}
        <div class="field">
        {{ wtf.form_datetime_field(form.butterbox_date, form.butterbox_date.errors) }}
        </div>
        <div class="field">
            {{ wtf.form_input_field(form.butterbox_name, form.butterbox_name.errors) }}
            <p class="help">{{ _("This is the name shown in the UI.
                    Current name:")}} {{ get_setting('butterbox_name') }}, {{ _("accessed at")}} {{ get_setting('butterbox_name') }}.local.</p>
        </div>
        <div class="field">
            {{ wtf.form_input_field(form.butterbox_hostname, form.butterbox_hostname.errors) }}
            <p class="help">{{ _("This is the URL used to access the box by adding .local in your browser.
                    Current hostname:")}} {{ get_setting('butterbox_hostname') }}.local.</p>
        </div>
        <div class="field">
            <label class="label">{{ form.butterbox_logo.label }} </label>
            <div class="control block">{{ form.butterbox_logo(class='label', style="width: 280px") }}</div>
            {{ wtf.field_errors(form.butterbox_logo.errors) }}
            <div class="block"><p class="help">{{ _("This is the logo shown in the UI. Current logo:")}}</p></div>
            <img src="{{ get_setting('butterbox_logo') }}" style="height: 50px">
        </div>
                <div class="control block">
            <button class="button"> <a href={{ url_for("step1") }}>{{ _("Back") }}</a></button>
             {{ form.submit( class="button is-link") }}
        </div>
    </form>
</div>

{% endblock %}