{% extends "base.html" %}
{% load i18n static %}

{# Nothing in this file should be reported. It shows the template patterns  #}
{# that ramplint understands instead of flagging them as false positives.  #}

{% block extra_head %}
{# A viewport that allows zooming. #}
<meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}

{% block content %}
<h2>{% block page_title %}{% endblock %}</h2>
<h3>{% trans "Details" %}</h3>

{# Rows rendered by Django - ramplint cannot see them, so it stays quiet. #}
<table>{{ form.as_table }}</table>
<table>{% include "orders/rows.html" %}</table>

{# Layout table explicitly marked as such. #}
<table role="presentation"><tr><td>{{ left }}</td><td>{{ right }}</td></tr></table>

<form method="post">
  {% csrf_token %}
  {# Label and input ids come from the form field. #}
  <label for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
  <input type="email" id="{{ form.email.id_for_label }}" name="email">

  {# Attributes rendered by the widget itself. #}
  <input {{ widget.attrs }}>

  {# Valid autofill tokens, including sections and dynamic values. #}
  <label for="ship">{% trans "Address" %}</label>
  <input id="ship" name="ship" autocomplete="section-gift shipping street-address">
  <label for="work-email">{% trans "Work email" %}</label>
  <input id="work-email" name="work_email" autocomplete="work email">
  <label for="pwd">{% trans "New password" %}</label>
  <input id="pwd" type="password" name="pwd" autocomplete="new-password">
  <label for="promo">{% trans "Promo code" %}</label>
  <input id="promo" name="promo" autocomplete="off">
  <label for="city">{% trans "City" %}</label>
  <input id="city" name="city" autocomplete="{{ field.autocomplete }}">

  {# Wrapped label, hidden and submit inputs. #}
  <label>{% trans "Remember me" %} <input type="checkbox" name="remember"></label>
  <input type="hidden" name="next" value="{{ next }}">
  <input type="submit" value="{% trans 'Save' %}">
</form>

{# The same id in {% if %} / {% else %} branches - only one is ever rendered. #}
{% if user.is_authenticated %}
  <p id="greeting">{% trans "Welcome back" %}</p>
{% else %}
  <p id="greeting">{% trans "Hello, guest" %}</p>
{% endif %}

{# Text, translations and includes all count as accessible names. #}
<button type="button">{{ button_label }}</button>
<button type="button" aria-label="{% trans 'Close' %}"><i class="icon-x" aria-hidden="true"></i></button>
<a href="{% url 'help' %}">{% include "icons/help.html" %}</a>
<a href="{{ product.get_absolute_url }}"><img src="{{ product.thumb.url }}" alt="{{ product.name }}"></a>

{# Real links: fragment, named anchor, URL from a variable. #}
<a href="#reviews">{% trans "Jump to reviews" %}</a>
<a id="top"></a>
<a href="{{ next_url }}">{% trans "Continue" %}</a>

{# tabindex 0 and -1 keep the natural focus order; dynamic values are skipped. #}
<div role="button" tabindex="0">{% trans "Menu" %}</div>
<div id="dialog" tabindex="-1">{{ dialog_content }}</div>
<a href="{% url 'cart' %}" tabindex="{{ cart_tabindex }}">{% trans "Cart" %}</a>

{# Frames: title from a variable, and a hidden tracking frame. #}
<iframe src="{{ video.embed_url }}" title="{{ video.title }}"></iframe>
<iframe src="https://example.com/pixel" aria-hidden="true" tabindex="-1"></iframe>

{# Decorative image with an intentionally empty alt. #}
<img src="{% static 'img/divider.png' %}" alt="">

{# A known exception, silenced inline. #}
<img src="{% static 'img/tracking-pixel.gif' %}"> {# ramplint: ignore img-alt #}
{% endblock %}