{% macro troubleshooting_info(question) %}
  <div class="about-support">
    {% if question.metadata.troubleshooting_parsed %}
      {% set parsed = question.metadata.troubleshooting_parsed %}
      <h3 class="sumo-card-heading">{{ _('Application') }}</h3>
      <ul>
        <li>
          {% trans app_name=parsed.application.name, app_version=parsed.application.version %}
            {{app_name}} {{app_version}}
          {% endtrans %}
        </li>
        <li>{{ _('User Agent: {user_agent}')|fe(user_agent=parsed.application.userAgent) }}</li>
        <li>{{ _('Support URL: {support_url}')|fe(support_url=parsed.application.supportURL) }}</li>
      </ul>

      <h3 class="sumo-card-heading">{{ _('Extensions') }}</h3>
      <ul>
        {% for ext in parsed.extensions %}
          {# title is to provide a hover tip. #}
          <li {% if not ext.isActive %}class="inactive"{% endif %}>
            {% if ext.isActive %}
              {{ _('{name} {version} ({id})')|fe(name=ext.name, version=ext.version, id=ext.id) }}
            {% else %}
              {{ _('{name} {version} ({id}) (Inactive)')|fe(name=ext.name, version=ext.version, id=ext.id) }}
            {% endif %}
          </li>
        {% endfor %}
      </ul>

      <h3 class="sumo-card-heading">{{ _('Javascript') }}</h3>
      <ul>
        {% for key, value in parsed.javaScript|dictsort %}
          <li>
            {{ _('<span class="key">{key}</span>: {value}')|fe(key=key, value=value) }}
          </li>
        {% endfor %}
      </ul>

      <h3 class="sumo-card-heading">{{ _('Graphics') }}</h3>
      <ul>
        {% for key, value in parsed.graphics|dictsort %}
          <li>
            {{ _('<span class="key">{key}</span>: {value}')|fe(key=key, value=value) }}
          </li>
        {% endfor %}
      </ul>

      <h3 class="sumo-card-heading">{{ _('Modified Preferences') }}</h3>
      <ul>
        {% for key, value in parsed.modifiedPreferences|dictsort %}
          <li>
            {{ _('<span class="key">{key}</span>: {value}')|fe(key=key, value=value) }}
          </li>
        {% endfor %}
      </ul>

      <h3 class="sumo-card-heading">{{ _('Misc') }}</h3>
      <ul>
        <li>
          {% if parsed.userJS.exists %}
            {{ _('<span class="key">User JS</span>: Yes') }}
          {% else %}
            {{ _('<span class="key">User JS</span>: No') }}
          {% endif %}
        </li>
        <li>
          {% if parsed.accessibility.isActive %}
            {{ _('<span class="key">Accessibility</span>: Yes') }}
          {% else %}
            {{ _('<span class="key">Accessibility</span>: No') }}
          {% endif %}
        </li>
      </ul>
    {% else %}
      <h3 class="sumo-card-heading">{{ _('Application') }}</h3>
      <ul>
        <li>{{ _('User Agent: {ua}')|fe(ua=question.metadata.useragent) }}</li>
      </ul>
      {% if question.metadata.troubleshooting %}
      <h3 class="sumo-card-heading">{{ _('More Information') }}</h3>
      <p>{{ question.metadata.troubleshooting|trim|collapse_linebreaks|linebreaks }}</p>
      {% endif %}
    {% endif %}
  </div>
{% endmacro %}