{% extends "admin/layout.html" %}
{% block title %}{{ _("Typography") }}{% endblock %}
{% block html_head %}
  {{ super() }}
  <style type="text/css">
    #char-select { padding: 0 0 0 20px; }
    #char-select a { padding: 0 10px 0 10px; line-height: 40px; color: #111;
                     font-weight: bold; font-size: 32px;
                     text-decoration: none; }
    #char-select a:hover { border: 1px solid #222; padding: 0 9px 0 9px;
                           background-color: #eee; }
    form dd input { text-align: center; font-size: 2em!important; }
  </style>
  <script type="text/javascript">
    var $active_field = null;

    $(function() {
      $('form dd input').focus(function() {
        $active_field = $(this);
        $('#char-select').fadeIn('fast');
      }).blur(function() {
        $('#char-select').fadeOut('fast');
      });
    });

    function insertChar(char) {
      if ($active_field)
        $active_field.val(char);
    }
  </script>
{% endblock %}
{% block contents %}
  <h1>{{ _("Typography") }}</h1>
  <p>{% trans %}
    From here you can configure the typography settings. Note that the
    typography plugin has hardcoded semantics at the moment, so there is
    no way to change the algorithm from this config panel.
  {% endtrans %}</p>
  {%- call form() %}
    <dl>
      <dt>{{ _("Double Quote Pairs") }}</dt>
      <dd>
        {{ form.double_opening_quote(size=1) }}
        {{ form.double_closing_quote(size=1) }}
      </dd>
      <dt>{{ _("Single Quote Pairs") }}</dt>
      <dd>
        {{ form.single_opening_quote(size=1) }}
        {{ form.single_closing_quote(size=1) }}
      </dd>
    </dl>
    <div id="char-select" style="display: none">
      <strong>{{ _("Use Common Character") }}:</strong>
    {%- for char in '‘’‚“”„«»‹›\u300c\u300d\u300e\u300f' %}
      <a href="javascript:insertChar('{{ char }}')">{{ char }}</a>
    {%- endfor %}
    </div>
    <div class="actions">
      <input type="submit" value="{{ _('Save') }}">
    </div>
  {%- endcall %}
{% endblock %}