{% 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, and an immediate redirect. #}
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="0; url={% url 'home' %}">
{% 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>

{# ARIA: valid roles, states and references; hidden content that cannot be focused. #}
<div role="dialog" aria-modal="true" aria-labelledby="sort-title">
  <h3 id="sort-title">{% trans "Sort" %}</h3>
  <div role="switch" tabindex="0" aria-checked="{{ in_stock|yesno:'true,false' }}">{% trans "In stock only" %}</div>
  <div role="{{ widget_role }}">{{ widget }}</div>
</div>
<div class="carousel-clone" aria-hidden="true"><a href="{% url 'catalog:index' %}" tabindex="-1">{% trans "All products" %}</a></div>

{# Lists: items from a loop, an include or a block; a description list with <div> groups. #}
<ul class="breadcrumbs">{% for crumb in breadcrumbs %}<li><a href="{{ crumb.url }}">{{ crumb.title }}</a></li>{% endfor %}</ul>
<ul class="menu">{% include "partials/menu_items.html" %}</ul>
<ol class="steps">{% block steps %}{% endblock %}</ol>
<ul role="tablist"><button role="tab" aria-selected="true">{% trans "Reviews" %}</button></ul>
<dl class="specs">
  {% for spec in product.specs.all %}
  <div><dt>{{ spec.name }}</dt><dd>{{ spec.value }}</dd></div>
  {% endfor %}
</dl>

{# Tables: valid scope, a visually hidden header and the empty top-left corner cell. #}
<table class="sales">
  <tr><th></th><th scope="col">{% trans "Q1" %}</th><th><span class="visually-hidden">{% trans "Actions" %}</span></th></tr>
  {% for region in regions %}
  <tr><th scope="row">{{ region.name }}</th><td>{{ region.q1 }}</td><td><a href="{{ region.url }}">{% trans "Details" %}</a></td></tr>
  {% endfor %}
</table>

{# A card with a link and a separate button; an <a> without href is not a control. #}
<div class="card"><h3><a href="{{ product.get_absolute_url }}">{{ product.name }}</a></h3><button type="button">{% trans "Add to cart" %}</button></div>
<a class="drag-handle"><button type="button">{% trans "Move" %}</button></a>

{# Language of parts: valid tags and the language from a variable. #}
<p lang="uk">{{ product.name_uk }}</p>
<p lang="zh-Hant">{{ product.name_zh }}</p>
<span lang="{{ review.language }}">{{ review.text }}</span>
<div class="marquee">{{ news_ticker }}</div>

{# Media: captions, a muted background video, a named chart and a PDF with a download link. #}
<video controls src="{{ product.video.url }}"><track kind="captions" src="{{ product.captions.url }}" srclang="en"></video>
<video autoplay muted loop playsinline src="{% static 'video/background.mp4' %}"></video>
<svg role="img" viewBox="0 0 120 40"><title>{% trans "Sales grew 20% this year" %}</title><rect width="80" height="20"></rect></svg>
<object data="{% static 'docs/prices.pdf' %}" type="application/pdf"><a href="{% static 'docs/prices.pdf' %}">{% trans "Download the price list (PDF)" %}</a></object>

{# Interactive roles that can be focused: tabindex, roving tabindex, a managed listbox. #}
<div role="tablist"><span role="tab" tabindex="0" aria-selected="true">{% trans "Details" %}</span><span role="tab" tabindex="-1" aria-selected="false">{% trans "Reviews" %}</span></div>
<ul role="listbox" tabindex="0" aria-label="{% trans 'Size' %}" aria-activedescendant="size-m"><li role="option" id="size-m" aria-selected="true">M</li></ul>
<span role="button" aria-disabled="true">{% trans "Sold out" %}</span>

{# Access keys: unique, or the same key in exclusive branches. #}
<a href="{% url 'search' %}" accesskey="f">{% trans "Find" %}</a>
{% if user.is_authenticated %}<a href="{% url 'account' %}" accesskey="a">{% trans "Account" %}</a>{% else %}<a href="{% url 'login' %}" accesskey="a">{% trans "Log in" %}</a>{% endif %}

{# 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 %}