{% load i18n %}
<!--ROSETTA_INPAGE_BEGIN-->
<!--Cache: {% for key in rosetta_inpage.catalogs %}{{ key }}, {% endfor %}-->
<div class="rosetta-inpage-sidebar" id="rosetta-inpage-sidebar">
    <div class="rosetta-inpage-header">
        <!--<h1>Translate: {{ rosetta_inpage.translate_from|upper }} &raquo; {{ rosetta_inpage.translate_to|upper }}</h1>-->
        <h1>Translate to <strong>{{ rosetta_inpage.translate_to }}</strong></h1>
        <span>Your are viewing in <strong>{{ rosetta_inpage.locale_view }}</strong></span>
        <p {% ifequal rosetta_inpage.stats.translated rosetta_inpage.stats.count%}class="translated"{% endifequal %}>{{ rosetta_inpage.stats.translated }} / {{ rosetta_inpage.stats.count }} (<strong>{{ rosetta_inpage.stats.percentage|floatformat:0 }}%</strong>)</p>

        <ul>
            <li>
                <a href="javascript:void(0)" onclick="RosettaInpage.github();" title="Commit to GitHub">
                    <img src="{{ STATIC_URL }}rosetta_inpage/img/glyphicons/glyphicons_401_github.png" width="24" height="24"/>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" title="Change view language">
                    <img src="{{ STATIC_URL }}rosetta_inpage/img/glyphicons/glyphicons_340_globe.png" width="24" height="24"/>
                </a>
                <ul class="rosetta-inpage-dropdown">
                    {% for locale in rosetta_inpage.locales %}
                        <li><a href="javascript:void(0)" onclick="RosettaInpage.view('{{ locale.0 }}')" >{{ locale.1 }}</a></li>
                    {% endfor %}
                    <li><a href="javascript:void(0)" onclick="RosettaInpage.view()">Source</a></li>
                </ul>
            </li>
            <li>
                <a href="/rosetta_inpage/pick/?filter=third-party" target="_blank" title="Go to translation admin">
                    <img src="{{ STATIC_URL }}rosetta_inpage/img/glyphicons/glyphicons_355_bullhorn.png" width="24" height="24"/>
                </a>
            </li>
        </ul>
    </div>
    <div class="rosetta-inpage-content">
        <ul>
            <!--
            The translated strings the <code type="msg"> tags are placed between comment directives.
            Some strings contain html tags and they may not be executed, for example: <img src="%(static_url)/test.png"/>,
            this will do a server request for the image.
            -->
            {% for msg in rosetta_inpage.messages %}
            <li id="s-{{ msg.hash }}" {% if not msg.translated %}class="rosetta-inpage-todo"{% endif %}>
                <a href="javascript:void(0)">{{ msg.show }}</a>
                <code type="source" data-inpage="{'translated':'{{ msg.translated|lower }}'}"><!--{{ msg.source }}--></code>
                <code type="msg"><!--{{ msg.msg }}--></code>
            </li>
            {% endfor %}
        </ul>
    </div>
    <div class="rosetta-inpage-footer">
        <!--<img src="{{ STATIC_URL }}rosetta_inpage/img/squirrel.png" width="75"/>-->
        <p>It's done ...</p>
    </div>
</div>

<div class="rosetta-inpage-form" id="rosetta-inpage-form">
    <form action="{% url rosetta-inpage-message %}" method="post">
        <div class="rosetta-inpage-alert"></div>
        {% csrf_token %}
        <input type="hidden" name="source" value=""/>
        <input type="hidden" name="lang" value="{{ rosetta_inpage_translate_to }}"/>
        <input type="hidden" name="current" value=""/>
        <input type="hidden" name="next" value=""/>

        <textarea cols="60" rows="6" name="msg" tabindex="3001"></textarea>
        <input type="submit" name="submit" value="Save" tabindex="3002"/>
    </form>
</div>

<div class="rosetta-inpage-loading" id="rosetta-inpage-loading">
    <img src="{{ STATIC_URL }}rosetta_inpage/img/pacman.gif" alt="Loading ..."/>
</div>

<div class="rosetta-inpage-notify" id="rosetta-inpage-notify"></div>

<!--Custom Styling-->
<link href="{{ STATIC_URL }}rosetta_inpage/css/inpage.css" rel="stylesheet"/>
<!--Load jQuery and jQuery Ajax Form -->
<script>!window.jQuery && document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"><' + '/script>');</script>
<script>!window.jQuery().ajaxForm && document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.form/3.24/jquery.form.js"><' + '/script>');</script>
<!--Rosetta Inpage JavaScript and initialize after the file is loaded -->
<script src="{{ STATIC_URL }}rosetta_inpage/js/inpage.js"></script>
<script>RosettaInpage.init();</script>
<!--ROSETTA_INPAGE_END-->