{% load emoticons_tags %}
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="author" content="Fantomas42">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django-Emoticons</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body { background-color: #eee; }
      .container .row div { background-color: white; }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3">
          {% emoticons %}
          <h1>Django-Emoticons<br />
            <small>A usefull and incredible Django application that allow
              you to use <strong>emoticons</strong> in your templates :).</small>
          </h1>
          {% endemoticons %}
          <h2>Usage</h2>
          <p>
            Using the emoticons in templates is fairly simple, all depends if you need to apply
            the transformations on raw text or on variables.
          </p>
          <pre>{% verbatim %}
{% load emoticons_tags %}

{% emoticons %}
Coding is fun :)
{% endemoticons %}

{% with content="Coding is cool :D" %}
{{ content|emoticons }}
{% endwidth %}
{% endverbatim %}</pre>
          <p>
            The snippet will generate this output:
          </p>
          <blockquote>
            {% emoticons %}
            <p>Coding is fun :)</p>
            <p>Coding is cool :D</p>
            {% endemoticons %}
          </blockquote>
          <p>
            You can also exclude the emoticon transformations on specific markups
            if you are using HTML.
          </p>
          <pre>{% verbatim %}
{% load emoticons_tags %}

{% emoticons "h3" %}
&lt;h3&gt;Coding is fun :)&lt;/h3&gt;
&lt;p&gt;Coding is cool :D&lt;/p&gt;
{% endemoticons %}

{% endverbatim %}</pre>
          <p>
            The snippet will generate this output:
          </p>
          <blockquote>
            {% emoticons "h3" %}
            <h3>Coding is fun :)</h3>
            <p>Coding is cool :D</p>
            {% endemoticons %}
          </blockquote>
          <h2>Index of the emoticons</h2>
          {% emoticons_index as emoticons_list %}
          <table class="table table-striped table-bordered table-condensed table-hover">
            <thead>
              <tr>
                <th class="text-center">
                  Emoticon
                </th>
                <th>
                  Aliases
                </th>
              </tr>
            </thead>
            <tbody>
              {% for emoticons in emoticons_list %}
              <tr>
                <td class="text-center">
                  {{ emoticons.0|safe|emoticons }}
                </td>
                <td>
                  {% for emoticon in emoticons %}<code>{{ emoticon }}</code> {% endfor %}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
          <footer>
            <p class="text-right">
              Demo made by <a href="https://github.com/Fantomas42">Fantomas42</a>.
            </p>
          </footer>
        </div>
      </div>
    </div>
  </body>
</html>
