{% from 'products/includes/topic_macros.html' import help_topics with context %}
{% from 'includes/common_macros.html' import featured_articles, scam_banner %}

{% macro select_product(products) -%}
  <h1 class="sumo-page-heading">{{ _('Contact Support') }}</h1>
  <h2 class="sumo-page-subheading">{{ _('Which product do you need help with?') }}</h2>
  <div class="sumo-page-section--inner">
    <div id="product-picker" class="sumo-card-grid stack-on-mobile">
      <div class="scroll-wrap">
        {% for product in products %}
          <div class="card card--product zoom-on-hover">
          <img src="{{ product.image_alternate_url }}"
              alt="{{ pgettext('DB: products.Product.title', product.title) }}"
              class="card--icon">

            <div class="card--details">
              <h3 class="card--title">
                <a class="expand-this-link title"
                  href="{{ url('questions.aaq_step2', product_slug=product.slug) }}"
                  data-event-name="link_click"
                  data-event-parameters='{
                    "link_name": "aaq-step-2",
                    "link_detail": "{{ product.slug }}"
                  }'>
                  {{ product.title }}
                </a>
              </h3>
              <p class="card--desc">{{ product.description }}</p>
            </div>
          </div>
        {% endfor %}
        <div class="card card--centered-button">
          <a class="sumo-button primary-button button-lg" href="{{ url('questions.home') }}">{{ _('Browse All Product Forums')}}</a>
        </div>
      </div>
    </div>
  </div>
{%- endmacro %}

{% macro progress_bar(step, product_slug=None) %}
  <ul class="progress">
    <li class="progress--item {% if step > 1 %}is-complete{% elif step == 1 %}is-current{% endif %}">
      <a class="progress--link"
        {% if step > 1 and step < 4 %}
          href="{{ url('questions.aaq_step1') }}?q=change_product"
        {% else %}
          href="#" disabled
        {% endif %}>
        <span class="progress--link-inner">
          <span class="progress--dot"></span>
          {% if step > 1 and step < 4 %}
            <span class="progress--label">{{ _('Change Product') }}</span>
          {% else %}
            <span class="progress--label">{{ _('Select Product') }}</span>
          {% endif %}
        </span>
      </a>
    </li>
    <li class="progress--item {% if step > 2 %}is-complete{% elif step == 2 %}is-current{% endif %}">
      <a class="progress--link"
        {% if step == 3 and product_slug %}
          href="{{ url('questions.aaq_step2', product_slug) }}"
        {% else %}
          href="#" disabled
        {% endif %}>
        <span class="progress--link-inner">
          <span class="progress--dot"></span>
          <span class="progress--label">{{ _('Explore Solutions') }}</span>
        </span>
      </a>
    </li>
    <li class="progress--item {% if step > 3 %}is-complete{% elif step == 3 %}is-current{% endif %}">
      <a class="progress--link" href="#" disabled>
        <span class="progress--link-inner">
          <span class="progress--dot"></span>
          <span class="progress--label">{{ _('Get Support') }}</span>
        </span>
      </a>
    </li>
  </ul>
{%- endmacro %}

{% macro aaq_widget(request, location="aaq", topic=None) %}
  {% set aaq_context = request.session.get("aaq_context") %}
  <div class="aaq-widget card is-inverse elevation-01 text-center radius-md">
    <h2 class="card--title has-bottom-margin">
      <svg class="card--icon-sm" width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
          <g transform="translate(2.000000, 1.878680)" stroke="#FFFFFF" stroke-width="2">
            <path d="M9,1.12132031 L2,1.12132031 C0.8954305,1.12132031 5.32907052e-15,2.01675081 5.32907052e-15,3.12132031 L5.32907052e-15,15.1213203 C5.32907052e-15,16.2258898 0.8954305,17.1213203 2,17.1213203 L11,17.1213203 L13,21.1213203 L15,17.1213203 L17,17.1213203 C18.1045695,17.1213203 19,16.2258898 19,15.1213203 L19,9.12132031"></path>
            <path d="M15.5,0.621320312 C16.3284271,-0.207106783 17.6715729,-0.207106769 18.5,0.621320344 C19.3284271,1.44974746 19.3284271,2.79289318 18.5,3.62132031 L11,11.1213203 L7,12.1213203 L8,8.12132031 L15.5,0.621320312 Z"></path>
          </g>
        </g>
      </svg>

      {{ _('Ask a Question') }}
    </h2>
    {% set link_detail = aaq_context.product_slug if aaq_context else topic %}
    {% set has_support = aaq_context.has_ticketing_support if aaq_context else False %}
    {% set has_forum = aaq_context.has_public_forum if aaq_context else False %}
    {% set multiple_products = aaq_context.multiple_products if aaq_context else False %}

    {% if aaq_context %}
      {% if request.user.is_authenticated %}
        {% if has_support %}
          <p>{{ _('Still need help? Continue to contact our support team.') }}</p>
        {% else %}
          <p>{{ _('Still need help? Continue to ask your question on our forums.') }}</p>
        {% endif %}
     {% else %}
        {% if has_support %}
          <p>{{ _('Still need help? Sign in to contact our support team.') }}</p>
        {% else %}
          <p>{{ _('Still need help? Sign in to ask your question on our forums.') }}</p>
        {% endif %}
      {% endif %}
    {% else %}
      <p>{{ _('Still need help? Continue to ask your question and get help.') }}</p>
    {% endif %}

    {% set link_name = "aaq-widget.community-support.kb-article" if not (has_support or has_forum)
                      else "aaq-widget.aaq-step-3" %}

    {% set next_step = url('wiki.document', 'get-community-support')|urlparams(exit_aaq=1) 
                       if not (has_support or has_forum or topic)
                       else url('questions.aaq_step3', product_slug=aaq_context.product_slug) 
                       if aaq_context and not multiple_products
                       else url('questions.aaq_step1') %}
  
    <a class="sumo-button primary-button feature-box"
      href="{{ next_step }}"
      data-event-name="link_click"
      data-event-parameters='{
        "link_name": "{{ link_name }}",
        "link_detail": "{{ link_detail }}"
      }'>
      {{ _('Continue')}}
    </a>
    </div>
{%- endmacro %}

{% macro explore_solutions(product, search_box, featured, topics, has_ticketing_support=True) -%}
{% set search_params = {'product': product.slug} %}
<section class="sumo-page-section question-masthead shade-bg">
  <div class="mzp-l-content">

    {{ progress_bar(2) }}

    {% if not has_ticketing_support %}
      {{ scam_banner() }}
    {% endif %}

    <div class="sumo-l-two-col sidebar-on-right align-center cols-on-medium">
      <div class="sumo-l-two-col--main home-search-section--content">
        <img class="page-heading--logo" src="{{ product.image_alternate_url }}" alt="{{ product.title }} logo">
        <h1 class="sumo-page-heading ">
          <span class="product-title-text">{{ product.title }} {{ _('Solutions') }}</span>
        </h1>
        {{ search_box(settings, id='question-search-masthead', params=search_params) }}

        <p class="page-heading--intro-text">
            {{ _('Browse our self-help options first or continue to ask your question and get help.') }}
        </p>
      </div>
      <div class="sumo-l-two-col--sidebar">
        {{ aaq_widget(request) }}
      </div>
    </div>
  </div>
</section>
<div class="wrap" id="main-content">
  {% if featured %}
    <section class="mzp-l-content sumo-page-section--inner">
      <div class="text-center-to-left-on-large">
        <h2 class="sumo-page-subheading">{{ _('Featured Articles') }}</h2>
      </div>
      {{ featured_articles(articles=featured, new_tab=True) }}
    </section>
  {% endif %}
  <section class="sumo-page-section--inner hide-when-search-is-active highlight-box">
      <div class="mzp-l-content">
        <div class="text-center-to-left-on-large aaq-popular-topics">
          <h2 class="sumo-page-subheading">{{ _('Topics') }}</h2>
        </div>
        {{ help_topics(topics, product_slug=product.slug, new_tab=True) }}
      </div>
  </section>
</div>
{%- endmacro %}

{% macro troubleshooting_instructions(field) %}
  <div>
    <div id="api-section">
      <div id="troubleshooting-button" class="sumo-button-wrap">
        <button class="sumo-button" id="share-data" type="button">
          {{ _('Share Data') }}
        </button>
      </div>
      <p id="troubleshooting-manual" class="hide-until-expanded">
        {% trans %}
          We can't automatically get your browser's troubleshooting data, please
          <a href="https://support.mozilla.org/kb/use-troubleshooting-information-page-fix-firefox">try these manual steps</a>.
        {% endtrans %}
      </p>
      <div id="troubleshooting-field" class="hide-until-expanded field full-width">
        {{ field }}
      </div>
      <p>
        {{ _('This information gives details about the internal workings of your browser that will help in answering your question.') }}
      </p>
    </div>
  </div>
{% endmacro %}