{% extends "base.html" %}

{% block title %}{{ _('Group Category') }} — {{ service_name }}{% endblock %}

{% block stylesheets %}
  {{ super() }}
  <link rel="stylesheet" href="{{ fingerprinted_static('bootstrap-select/css/bootstrap-select.min.css') }}"/>
{% endblock %}

{% block template_values %}
  {% do set_template_value("language_info.english_id", ENGLISH.id) %}

  {{ super() }}
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="{{ fingerprinted_static('bootstrap-select/js/bootstrap-select.min.js') }}"></script>
  <script src="{{ fingerprinted_static('sampledb/js/page/group_category_form.js') }}" type="module"></script>
{% endblock %}

{% block content %}
  <form method="post">
    {{ group_category_form.hidden_tag() }}

    <div class="form-group row" style="padding-right: 10px">
      <label for="select-languages" class="control-label col-md-10">{{ _("Languages") }}</label>
      <select class="selectpicker btn-xs select-language col-md-2" data-style="btn-default btn-xs" multiple="multiple" name="translation-languages" id="select-languages">
        {% for language in languages %}
          <option value="{{ language.id }}" {% if language.id == ENGLISH.id %} disabled="disabled" selected="selected" {% endif %} {% if language.id in translation_language_ids %} selected="selected"{% endif %} data-name="{{ language.names | get_translated_text }}">{{ language.names | get_translated_text }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <div class="form-group" style="margin-bottom: 0">
          <label class="control-label">{{ _('Name') }}</label>
      </div>
      {% for language in languages %}
        <div class="form-group" data-language-id="{{ language.id }}">
          <div class="input-group">
            <input type="text" class="form-control" name="name_{{ language.id }}" placeholder="{{ _('Name') }}" value="{{ translated_texts.name.get(language.lang_code, '') }}" data-empty-text="{{ _("Please enter a name.") }}" data-max-length="100" data-max-length-text="{{ _("Please enter a shorter name (at most 100 characters).") }}">
            <span class="input-group-addon language-addon">{{ language.names | get_translated_text }}</span>
          </div>
          <span class="help-block"></span>
        </div>
      {% endfor %}
    </div>
    <div class="form-group">
      <label for="select-categories" class="control-label">{{ _("Parent Category") }}</label>
      <select class="selectpicker form-control" required="required" id="select-categories" name="{{ group_category_form.parent_category_id.name }}">
        {% for category_id, category_name in group_category_form.parent_category_id.choices %}
          <option value="{{ category_id }}" {% if category_id == group_category_form.parent_category_id.data %}selected="selected"{% endif %}>
            {{ category_name }}
          </option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group row clearfix" style="padding-right:0.75em">
      <div class="col-md-3 col-md-offset-6">
        <a href="{{ url_for('.group_categories') }}" class="btn btn-default pull-right" style="width:20em">{{ _('Cancel') }}</a>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-primary pull-right" style="width:20em">{{ submit_text }}</button>
      </div>
    </div>
  </form>
{% endblock %}
