{% extends "/base.html" %}

{%- block control -%}<section>
  {% if input.type != 'password' %}
  <p><span style="white-space: pre">{{ input.value }}</span>
    {% if input.multiple %}<a href=":%0A{{Q}}">↲</a>{% endif %}</p>
  <hr />
  {% endif %}
  <p><a href="..{{Q}}">abc</a> | <a href="../latin1-upper/{{Q}}">ABC</a> |
      <strong>!@#</strong> | <a href="../latin1-accent-lower/{{Q}}">àêï</a> |
      <a href="../latin1-accent/{{Q}}">ÀÊÏ</a></p>
  <table>
    <tr>
      <td><a href=":{{'?'|xURI}}{{Q}}">?</a></td>
      <td><a href=":,{{Q}}">,</a></td>
      <td><a href=":.{{Q}}">.</a></td>
      <td><a href="::{{Q}}">:</a></td>
      <td><a href=":;{{Q}}">;</a></td>
      <td><a href=":{{'('|xURI}}{{Q}}">(</a></td>
      <td><a href=":{{')'|xURI}}{{Q}}">)</a></td>
    </tr>
    <tr>
      <td><a href=":{{'/'|xURI}}{{Q}}">/</a></td>
      <td><a href=":{{'='|xURI}}{{Q}}">=</a></td>
      <td><a href=':"{{Q}}'>"</a></td>
      <td><a href=":'{{Q}}">'</a></td>
      <td><a href=":{{'!'|xURI}}{{Q}}">!</a></td>
      <td><a href=":{{'['|xURI}}{{Q}}">[</a></td>
      <td><a href=":{{']'|xURI}}{{Q}}">]</a></td>
    </tr>
    <tr>
      <td><a href=":\{{Q}}">\</a></td>
      <td><a href=":{{'~'|xURI}}{{Q}}">~</a></td>
      <td><a href=":{{'`'|xURI}}{{Q}}">`</a></td>
      <td><a href=":{{'|'|xURI}}{{Q}}">|</a></td>
      <td><a href=":{{'@'|xURI}}{{Q}}">@</a></td>
      <td><a href=":{{'{'|xURI}}{{Q}}">{</a></td>
      <td><a href=":{{'}'|xURI}}{{Q}}">}</a></td>
    </tr>
    <tr>
      <td><a href=":{{'¸'|xURI}}{{Q}}">¸</a></td>
      <td><a href=":{{'%'|xURI}}{{Q}}">%</a></td>
      <td><a href=":{{'^'|xURI}}{{Q}}">^</a></td>
      <td><a href=":{{'&'|xURI}}{{Q}}">&</a></td>
      <td><a href=":{{'*'|xURI}}{{Q}}">*</a></td>
      <td><a href=":{{'<'|xURI}}{{Q}}">&lt;</a></td>
      <td><a href=":{{'>'|xURI}}{{Q}}">&gt;</a></td>
    </tr>
    <tr>
      <td><a href=":{{'¶'|xURI}}{{Q}}">¶</a></td>
      <td><a href=":{{'#'|xURI}}{{Q}}">#</a></td>
      <td><a href=":{{'$'|xURI}}{{Q}}">$</a></td>
      <td><a href=":{{'-'|xURI}}{{Q}}">-</a></td>
      <td><a href=":{{'_'|xURI}}{{Q}}">_</a></td>
      <td><a href=":{{'´'|xURI}}{{Q}}">´</a></td>
      <td><a href=":{{'·'|xURI}}{{Q}}">·</a></td>
    </tr>
    <tr>
      <td><a href=":{{'×'|xURI}}{{Q}}">×</a></td>
      <td><a href=":{{'¢'|xURI}}{{Q}}">¢</a></td>
      <td><a href=":{{'£'|xURI}}{{Q}}">£</a></td>
      <td><a href=":{{'¤'|xURI}}{{Q}}">¤</a></td>
      <td><a href=":{{'¥'|xURI}}{{Q}}">¥</a></td>
      <td><a href=":{{'«'|xURI}}{{Q}}">«</a></td>
      <td><a href=":{{'»'|xURI}}{{Q}}">»</a></td>
    </tr>
    <tr>
      <td><a href=":{{'÷'|xURI}}{{Q}}">÷</a></td>
      <td><a href=":{{'§'|xURI}}{{Q}}">§</a></td>
      <td><a href=":{{'¨'|xURI}}{{Q}}">¨</a></td>
      <td><a href=":{{'©'|xURI}}{{Q}}">©</a></td>
      <td><a href=":{{'ª'|xURI}}{{Q}}">ª</a></td>
      <td><a href=":{{'¡'|xURI}}{{Q}}">¡</a></td>
      <td><a href=":{{'¦'|xURI}}{{Q}}">¦</a></td>
    </tr>
    <tr>
      <td><a href=":{{'µ'|xURI}}{{Q}}">µ</a></td>
      <td><a href=":{{'¬'|xURI}}{{Q}}">¬</a></td>
      <td><a href=":{{'¯'|xURI}}{{Q}}">¯</a></td>
      <td><a href=":{{'®'|xURI}}{{Q}}">®</a></td>
      <td><a href=":{{'°'|xURI}}{{Q}}">°</a></td>
      <td><a href=":{{'±'|xURI}}{{Q}}">±</a></td>
      <td><a href=":{{'¿'|xURI}}{{Q}}">¿</a></td>
    </tr>
    <tr>
      <td><a href=":{{'º'|xURI}}{{Q}}">º</a></td>
      <td><a href=":{{'¹'|xURI}}{{Q}}">¹</a></td>
      <td><a href=":{{'²'|xURI}}{{Q}}">²</a></td>
      <td><a href=":{{'³'|xURI}}{{Q}}">³</a></td>
      <td><a href=":{{'¼'|xURI}}{{Q}}">¼</a></td>
      <td><a href=":{{'½'|xURI}}{{Q}}">½</a></td>
      <td><a href=":{{'¾'|xURI}}{{Q}}">¾</a></td>
    </tr>
    {% if input.inputType == "email" %}<tr>
      <td><a href=":@{{Q}}">@</a></td>
      <td><a href=":.{{Q}}">.</a></td>
      <td colspan="2"><a href=":.com{{Q}}">.com</a>
      <td colspan="2"><a href=":.org{{Q}}">.org</a>
    </tr>{% endif %}
    <tr>
      <td><a href=":{{'+'|xURI}}{{Q}}">+</a></td>
      <td colspan="2"><a href=":%20{{Q}}">SPACE</a></td>
      <td colspan="2"><a href="-{{Q}}">DEL</a></td>
      <td colspan="2"><a href="={{Q}}">CLEAR</a></td>
    </tr>
  </table>
</section>{%- endblock -%}