{#

Base template for creating a new or editing an existing question. The cases for
showing uneditable product and category names are handled here. Fancier
behaviors like editing them can be provided by overriding blocks.

#}
{% extends "questions/base.html" %}
{% from "layout/errorlist.html" import errorlist %}
{% from "includes/common_macros.html" import search_box, scam_banner, content_editor with context %}
{% from "questions/includes/aaq_macros.html" import progress_bar %}
{% from "questions/includes/aaq_macros.html" import troubleshooting_instructions with context %}
{% from "upload/attachments.html" import attachments_form %}
{% set scripts = ('questions', 'questions.geo',) %}

{% set hide_aaq_link = True %}

{% block contentwrap %}
<div id="main-content" class="aaq">
  <article class="main mzp-l-content sumo-page-section--inner">
    {% if current_step %}
      {{ progress_bar(current_step, product_slug=current_product.slug) }}

      {% if current_step > 1 and not has_ticketing_support %}
        {{ scam_banner() }}
      {% endif %}
    {% endif %}

    {% block formwrap %}
    <img class="page-heading--logo" src="{{ current_product.image_alternate_url }}" alt="{{ current_product.title }} logo" />

    {# TODO: hook this up to the backend when subproducts are in.
    <div class="mzp-c-menu-list subheading-dropdown">
      <h3 class="mzp-c-menu-list-title sumo-card-heading" data-has-dropdown>Firefox</h3>
      <ul class="mzp-c-menu-list-list">
        <li class="mzp-c-menu-list-item"><a href="#">Subproducts</a></li>
        <li class="mzp-c-menu-list-item"><a href="#">Will go here</a></li>
      </ul>
    </div> #}
    <h3 class="mzp-c-menu-list-title sumo-card-heading back-to-product-list">
      {{ current_product.title }}
    </h3>


    {% block major_detail_instructions %}
    {% endblock %}
    <div class="sumo-l-two-col">
      <aside class="sumo-l-two-col--sidebar">
        {% if form and not has_ticketing_support %}
          <div class="card has-moz-headings is-in-sidebar is-callout-bg text-center large-only">
              <img class="card--img" src="{{ webpack_static('sumo/img/Mozilla-Heads-Keith-Negley-180628__400.png') }}" alt="Illustration of community" />
              <div class="card--details">
                <h3 class="card--title">{{ _('Our Community is here to help') }}</h3>
                <p class="card--desc">{{ _('Kindness is at the heart of our community. Our volunteers are happy to share their time and Firefox knowledge with you.') }}</p>
                <p><strong><a href="{{ url('landings.contribute') }}">{{ _('Learn More') }}</a></strong></p>
              </div>
          </div>

          <div class="large-only">
            <h3 class="sumo-card-heading">
              <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/highlight.svg') }}" alt="Helpful Tip icon" />
              {{ _('Helpful Tip!')}}
            </h3>
            <p>{{ _('Follow through. Sometimes, our volunteers would ask you for more information or to test out certain scenarios. The sooner you can do this, the sooner they would know how to fix it.')}}
          </div>
        {% endif %}
      </aside>
      <article class="sumo-l-two-col--main">

        {% if not no_headline %}
          <h1 class="sumo-page-heading">{% block headline %}{% endblock %}</h1>
        {% endif %}
        <div class="inner-wrap">

        {% if form %}
          <div class="highlight-box">
            <form id="question-form" method="post">
              {% csrf_token %}

              {% if not has_ticketing_support %}
                <p class="sumo-page-intro">
                  {% trans %}
                    Be nice. Our volunteers are Mozilla users just like you,
                    who take the time out of their day to help.
                  {% endtrans %}
                </p>
              {% endif %}

              <div class="info card shade-bg highlight mb">
              {% if is_loginless and not user.is_authenticated %}
                {% trans %}
                  Can't sign in to your account and need help?
                  You've found the right place. Complete the form below
                  to contact our support staff.
                {% endtrans %}
              {% else %}
                {% trans %}
                  Be descriptive.
                  Saying “playing video on YouTube is always choppy”
                  will help us understand the issue better than saying
                  “something is wrong” or “the app is broken”.
                {% endtrans %}
              {% endif %}
              </div>

              {% for field in form.hidden_fields() %}
                {{ field|safe }}
              {% endfor %}
              <ul class="form-as-ul full-width">
                {% set li_class='' %}
                {% for field in form.visible_fields() if not field.name == 'notifications' %}

                  {% if not has_ticketing_support %}
                    {% if field.name == 'ff_version' %}
                      <li class="system-details-info show">
                        <p>
                          {{ _("We've made some educated guesses about your current browser and operating system.") }}
                          <a href="#show-details" class="show">{{ _('Show details &raquo;')|safe }}</a>
                          <a href="#hide-details" class="hide hide-until-expanded">{{ _('Hide details &raquo;')|safe }}</a>
                        </p>
                      </li>
                    {% endif %}
                    {% if field.name == 'ff_version' or field.name == 'os' %}
                      {% set li_class='details' %}
                    {% endif %}
                  {% endif %}

                  <li class="{{ li_class }} {% if field.errors %}has-error invalid{% endif %} cf">
                    {{ field.label_tag()|safe }}
                    {% if field.name == 'content' %}
                      {{ content_editor(field) }}
                    {% elif field.name == 'troubleshooting' %}
                      {{ troubleshooting_instructions(field) }}
                    {% elif field.name == 'description' and is_loginless %}
                      <label for="{{ field.id_for_label }}">
                        <span class="fieldnote">
                          {{ _(
                          "Include details such as your account e-mail or specifics about"
                          " your sign-in issue to help us get you back into your account quicker."
                          ) }}
                        </span>
                      </label>
                      {{ field }}
                      {{ field.errors }}
                    {% elif category_field_attrs and (field.name == 'category') %}
                      {{ field.as_widget(attrs=category_field_attrs)|safe }}
                    {% else %}
                      {{ field|safe }}
                    {% endif %}

                    {% if field.help_text and field.name != 'troubleshooting' %}
                      <p>{{ field.help_text|safe }}</p>
                    {% endif %}

                    {% if field.name != 'content' %}
                      {{ field.errors }}
                    {% endif %}
                  </li>

                  {% if field.name == 'content' %}
                    <li>
                      {% block attachments_form %}
                        {{ attachments_form('auth.User', user.pk, images, settings, user) }}
                      {% endblock %}
                    </li>
                  {% endif %}
                {% endfor %}

                {% if form.notifications %}
                  <li class="cf">
                    {{ checkbox(form.notifications) }}
                  </li>
                {% endif %}
              </ul>

              <div class="hide-on-large field">
                <h3 class="sumo-card-heading">
                  <img class="card--icon-sm" src="{{ webpack_static('protocol/img/icons/highlight.svg') }}" alt="Helpful Tip icon" />
                  {{ _('Helpful Tip!')}}
                </h3>
                <p>
                {% trans %}
                  Follow through. Sometimes, our volunteers would ask you for
                  more information or to test out certain scenarios. The sooner
                  you can do this, the sooner they would know how to fix it.
                {% endtrans %}
                </p>
              </div>

              <div class="sumo-button-wrap aaq-form-buttons reverse-on-desktop align-right">
                <button type="submit" class="sumo-button primary-button" {% block submit_button_attrs %}{% endblock %}>{% block submit_button_value %}Save Question{% endblock %}</button>
                {% block more_submit_buttons %}
                <a class="sumo-button secondary-button push-right" href="{{ cancel_url }}" class="cancel">{{ _('Cancel') }}</a>
                {% endblock %}
              </div>
            </form>
          </div>
        {% endif %}
      </article>

    </div>
    {% endblock %}
  </article>
</div>
{% endblock %}

{% block side %}
{% endblock %}