{% extends "withnav_template.html" %}
{% from "components/radios.html" import radios %}
{% from "components/live-search.html" import live_search %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}

{% block service_page_title %}
  Set letter branding
{% endblock %}

{% block maincolumn_content %}

  {{ page_header(
    'Set letter branding',
    back_link=url_for('.service_settings', service_id=current_service.id)
  ) }}
  {% call form_wrapper(data_kwargs={'preview-type': 'letter'}) %}
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-full preview-pane">
      </div>
    </div>
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-full">
        {{ live_search(target_selector='.multiple-choice', show=True, form=search_form, label='Search by name') }}
        {{ radios(form.branding_style, hide_legend=True) }}
      </div>
    </div>
    <div class="js-stick-at-bottom-when-scrolling">
      {{ page_footer('Preview') }}
    </div>
  {% endcall %}

{% endblock %}