{# vim: set ts=2 et sts=2 sw=2: #}
{% extends "questions/base.html" %}
{% from "layout/errorlist.html" import errorlist %}
{% from "upload/attachments.html" import attachments_form %}
{% from "includes/common_macros.html" import content_editor %}
{# L10n: {q} is the title of the question. #}
{% set title = _('{q} | Firefox Support Forum')|f(q=question.title) %}
{% set classes = 'answers' %}
{% set crumbs = [(url('questions.questions'), _('Forum')), (None, question.title)] %}

{% block content %}
  <article class="main">
    {% if request.GET.get('new') %}
      <div id="new-question">
        {{ _('Thanks! Your question has been posted. See it below.') }}
      </div>
    {% endif %}
    <section id="question">
      <div class="user-section">
        <div class="avatar{% if user == question.creator %} self{% endif %}">
          <a href="{{ profile_url(question.creator) }}">
            <img src="{{ profile_avatar(question.creator) }}" height="48" width="48" alt="{{ question.creator }}"/>
            {% if user == question.creator %}
              <span>{{ _('You') }}</span>
            {% endif %}
          </a>
        </div>
        <div class="asked-by">
          <a href="{{ profile_url(question.creator) }}">{{ question.creator }}</a>
        </div>
        <div class="asked-on">
          {{ question.created|timesince }}
        </div>
      </div>
      <div class="main-section">
        <div class="content">
          <h1>{{ question.title }}</h1>
          {{ question.content_parsed|safe }}
          <div class="stem"></div>{# for the speech bubble arrow #}
        </div>
        {% if question.updated_by %}
          <p class="edited">
            {{ _('Modified {datetime} by {name}')|fe(name=question.updated_by.username, datetime=datetimeformat(question.updated, format='longdatetime')) }}
          </p>
        {% endif %}
        <div class="problem">
          {% if not question.is_locked and not question.has_voted(request) %}
            <div class="me-too">
              <form action="{{ url('questions.vote', question_id=question.id) }}" method="post">
                {{ csrf() }}
                <input class="btn btn-important" type="submit" value="{{ _('I have this problem, too!') }}">
              </form>
            </div>
          {% endif %}
          {% include 'questions/includes/have_problem.html' %}
        </div>
        {% if question.solution %}
          <div class="solution">
            <h2>{{ _('Solution Chosen by {user}')|f(user=question.creator) }}</h2>
            <div class="mini-reply">
              <div class="avatar">
                <a href="{{ profile_url(question.solution.creator) }}">
                  <img src="{{ profile_avatar(question.solution.creator) }}" height="48" width="48" alt="{{ question.solution.creator }}"/>
                </a>
              </div>
              <div class="answer">
                <p>
                  <span class="user">{{ question.solution.creator.username }}:</span>
                  {{ question.solution.content_parsed|striptags()|truncate(170) }} <a href="{{ question.solution.get_absolute_url() }}">{{ _('Read more...') }}</a>
                </p>
                <div class="stem"></div>{# for the speech bubble arrow #}
              </div>
              <p class="helpful">
                {{ ngettext('{count} out of 1 person found this reply helpful',
                            '{count} out of {total} people found this reply helpful',
                            question.solution.num_votes)|f(count=question.solution.num_helpful_votes, total=question.solution.num_votes) }}
              </p>
            </div>
          </div>
        {% endif %}

        {% for answer in question.helpful_replies[0:2] %}
          {% if loop.first %}
            <div class="other-helpful">
              <h2>{{ _('Other Helpful Replies') }}</h2>
          {% endif %}
          <div class="mini-reply">
            <div class="avatar">
              <a href="{{ profile_url(answer.creator) }}">
                <img src="{{ profile_avatar(answer.creator) }}" height="48" width="48" alt="{{ answer.creator }}"/>
              </a>
            </div>
            <div class="answer">
              <p>
                <span class="user">{{ answer.creator.username }}:</span>
                {{ answer.content_parsed|striptags()|truncate(170) }} <a href="{{ answer.get_absolute_url() }}">{{ _('Read more...') }}</a>
              </p>
              <div class="stem"></div>{# for the speech bubble arrow #}
            </div>
            <p class="helpful">
              {{ ngettext('{count} out of 1 person found this reply helpful',
                          '{count} out of {total} people found this reply helpful',
                          answer.num_votes)|f(count=answer.num_helpful_votes, total=answer.num_votes) }}
            </p>
          </div>
          {% if loop.last %}
            </div>
          {% endif %}
        {% endfor %}
      </div>
      <div class="side-section">
        <ul class="actions">
          {% if user.has_perm('questions.change_question') or (not question.is_locked and question.creator == user) %}
            <li class="edit">
              <a href="{{ url('questions.edit_question', question.id) }}">{{ _('Edit this post') }}</a>
            </li>
          {% endif %}
          {% if user.has_perm('questions.delete_question') %}
            <li class="delete">
              <a class="delete" href="{{ url('questions.delete', question.id) }}">{{ _('Delete this post') }}</a>
            </li>
          {% endif %}
          {% if user.has_perm('questions.lock_question') %}
            <li class="lock">
              <form class="lock" action="{{ url('questions.lock', question.id) }}" method="post">
                {{ csrf() }}
                <input type="submit" class="link-btn" value="{% if question.is_locked %}{{ _('Unlock this post') }}{% else %}{{ _('Lock this post') }}{% endif %}" />
              </form>
            </li>
          {% endif %}
          <li class="email">
            {% if is_watching_question %}
              <form class="unwatch" action="{{ url('questions.unwatch', question.id) }}" method="post">
                {{ csrf() }}
                <input type="submit" class="stop link-btn" value="{{ _('Stop email updates') }}" />
              </form>
            {% else %}
              <a id="email-subscribe-link" href="#email-subscribe">{{ _('Get email updates') }}</a>
              {% include "questions/includes/email_subscribe.html" %}
            {% endif %}
          </li>
          <li class="rss">
            <a href="{{ url('questions.answers.feed', question.id) }}">{{ _("Subscribe to feed") }}</a>
          </li>
        </ul>

        <h2>{{ _('System Details') }}</h2>
        {% block system_info %}
          <ul class="system">
            {% if question.metadata.os %}
              {% set os = question.metadata.os %}
              {% set os_lower = os.lower() %}
              <li class="{% if os_lower.find('mac') >= 0 %}mac{% elif os_lower.find('linux') >= 0 %}linux{% elif os_lower.find('win') >= 0 %}windows{% endif %}">{{ os }}</li>
            {% endif %}
            {% if question.metadata.ff_version %}
              <li class="ff">Firefox {{ question.metadata.ff_version }}</li>
            {% endif %}
          </ul>
        {% endblock %}
        <p><a id="show-more-details" href="#more-system-details">{{ _('More system details...') }}</a></p>
        <section id="more-system-details" class="kbox" title="{{ _('Additional System Details') }}" data-target="#show-more-details" data-modal="true" data-id="more-system-details-kbox">
          <h1>{{ _('Additional System Details') }}</h1>
          {{ self.system_info() }}
          {% if question.metadata.sites_affected %}
            <h2>{{ _('Sites Affected') }}</h2>
            <p>{{ question.metadata.sites_affected }}</p>
          {% endif %}
          {% if question.metadata.crash_id %}
            <h2>{{ _('Crash ID') }}</h2>
            <p>{{ question.metadata.crash_id }}</p>
          {% endif %}
          {% if question.metadata.frequency %}
            <h2>{{ _('This happened') }}</h2>
            <p>{{ frequencies[question.metadata.frequency] }}</p>
          {% endif %}
          {% if question.metadata.started %}
            <h2>{{ _('This started when...') }}</h2>
            <p>{{ question.metadata.started }}</p>
          {% endif %}
          {% if question.metadata.troubleshooting %}
            <h2>{{ _('More Information') }}</h2>
            <p>{{ question.metadata.troubleshooting|trim|collapse_linebreaks|nl2br }}</p>
          {% endif %}
          {% if question.metadata.plugins %}
            <h2>{{ _('Installed Plug-ins') }}</h2>
            <div class="plugins">
              {{ question.metadata.plugins|wiki_to_html }}
            </div>
          {% endif %}
          {% if question.metadata.useragent %}
            <h2>{{ _('User Agent') }}</h2>
            <p>{{ question.metadata.useragent }}</p>
          {% endif %}
        </section>

        {% set tags = question.tags.all() %}
        {% if tags or can_tag %}
          <h2>{{ _('Tags') }}</h2>
          <div class="tags"{% if can_tag %} data-tag-vocab-json="{{ tag_vocab }}"{% endif %}{% if can_create_tags %} data-can-create-tags="1"{% endif %}>
            {% if can_tag %}
              <form action="{{ url('questions.remove_tag', question.id) }}"
                    data-action-async="{{ url('questions.remove_tag_async', question.id) }}"
                    method="POST"
                    class="remove-tag-form">
                {{ csrf() }}
            {% endif %}
            <ul class="tag-list{% if not can_tag %} immutable{% endif %}">
              {% for tag in tags %}
                <li class="tag">{# -#}
                  <a class="tag-name" href="{{ url('questions.questions')|urlparams(tagged=tag.slug) }}">{{ tag }}</a>
                  {%- if can_tag -%}
                    <input type="submit"
                           name="remove-tag-{{ tag }}"
                           value="&#x2716;"
                           class="remover" />
                  {%- endif -%}
                </li>
              {% endfor %}
            </ul>
            {% if can_tag %}
              </form>
            {% endif %}

            {% if can_tag %}
              {% if tag_adding_error %}
                <p class="tag-error-message">{{ tag_adding_error }}</p>
              {% endif %}
              <form action="{{ url('questions.add_tag', question.id) }}"
                    data-action-async="{{ url('questions.add_tag_async', question.id) }}"
                    method="POST"
                    class="tag-adder">
                {{ csrf() }}
                <input type="text" name="tag-name" size="12"
                       class="autocomplete-tags {% if tag_adding_error %} invalid{% endif %}"
                       value="{{ tag_adding_value }}" />
                <input class="adder btn" type="submit" value="{{ _('Add') }}" />
              </form>
            {% endif %}
          </div>
        {% endif %}

        {% if user.is_authenticated() and user != question.creator and not question.is_locked %}
          <form class="report" action="{{ url('questions.flag', question.id) }}" method="post">
            {% include 'questions/includes/flag_form.html' %}
          </form>
        {% endif %}

        {% if related %}
          <h2>{{ _('Related Questions') }}</h2>
          <ul class="related">
            {% for q in related %}
              <li><a href="{{ q.get_absolute_url() }}">{{ q.title|truncate(30, True) }}</a></li>
            {% endfor %}
          </ul>
        {% endif %}
      </div>
    </section>

    {% if answers.object_list %}
    <section id="answers">
      <header>
        <h1>
          {% if question.num_answers > 0 %}
            {# L10n: {n} is the number of replies. #}
            {{ ngettext('1 reply', '{n} replies', question.num_answers)|f(n=question.num_answers) }}
          {% else %}
            {{ _('No replies') }}
          {% endif %}
        </h1>
        {% if not question.is_locked %}
          <a class="btn btn-important" href="#question-reply">{{ _('Post a Reply') }}</a>
        {% endif %}
      </header>
      <ol class="answers">
        {% for answer in answers.object_list %}
          <li id="answer-{{ answer.id }}" class="answer">
            {% include "questions/includes/answer.html" %}
          </li>
        {% endfor %}
      </ol>
      {{ answers|paginator }}
    </section>
    {% endif %}

    <section id="question-reply">
      <header>
        <h1>{{ _('Post a Reply') }}</h1>
      </header>
      {% if question.is_locked %}
        <div class="user-section"></div>
        <div class="main-section">
          <p>
            {{ _('This question is locked.') }}
          </p>
        </div>
        <div class="side-section"></div>
      {% elif user.is_authenticated() %}
        <div class="user-section">
          <div class="avatar self">
            <a href="{{ profile_url(user) }}">
              <img src="{{ profile_avatar(user) }}" height="48" width="48" alt="{{ user }}"/>
              <span>{{ _('You') }}</span>
            </a>
          </div>
        </div>
        <div class="main-section">
          <form action="{{ url('questions.reply', question_id=question.id) }}#question-reply" method="post" enctype="multipart/form-data">
            {{ csrf() }}
            {{ errorlist(form) }}

            <div class="content">
              {{ content_editor(form.content) }}
              <div class="stem"></div>{# for the speech bubble arrow #}
            </div>

            {{ attachments_form('questions.Question', question.pk, images, settings, user) }}

            <div class="submit">
              <input type="submit" class="btn btn-important" value="{{ _('Post Reply') }}" />
              <input type="submit" class="preview link-btn" name="preview" value="{{ _('Preview Reply') }}" />
            </div>
          </form>
        </div>
        <div class="side-section"></div>
      {% else %}
        <div class="user-section"></div>
        <div class="main-section">
          <p>
            {{ _('You must <a href="{url}">log in to your account</a> to reply to posts.')|fe(url=url('users.login')) }}
          </p>
          <p>
            {{ _("Don't have an account? You can <a href='{url}'>create a free account</a> now.")|fe(url=url('users.register')) }}
          </p>
        </div>
        <div class="side-section"></div>
      {% endif %}
    </section>
    {% if answer_preview %}
      <section id="answer-preview">
        <header>
          <h1>{{ _('Reply Preview') }}</h1>
        </header>
        <ol class="answers">
          <li class="answer">
            {% set answer = answer_preview %}
            {% include "questions/includes/answer.html" %}
          </li>
        </ol>
      </section>
    {% endif %}
  </article>
{% endblock %}

{% block side %}
{% endblock %}