{% extends "base.html" %}
{% load i18n %}
{% load url from future %}

{% block breadcrumbs %}
<li><a href="{{ object.get_absolute_url }}">{{ object }}</a></li>
<li><a href="{% url 'widgets' project=object.slug %}">{% trans "widgets" %}</a></li>
{% endblock %}

{% block extra_meta %}
  <link rel="image_src" type="image/png" href="{{ image_src }}" />
{% endblock %}

{% block content %}

<h2>{% trans "Promoting translation projects" %}</h2>

<p>
{% blocktrans %}You can point newcomers to the introduction page at <a href="{{ engage_url }}">{{ engage_url }}</a>.{% endblocktrans %}
</p>

<h3>{% trans "Promoting specific translations" %}</h3>

<form class="autosubmit">
{% trans "Besides promoting whole translation project, you can also choose specific language to promote:" %} {{ form.lang }}
</form>


<h3>{% trans "Image widgets" %}</h3>

<p>
{% trans "You can use following widgets to promote translation of your project. They can increase visibility of your translation projects and bring new contributors." %}
</p>

{% for widget in widget_list %}
<h4>{% blocktrans with widget.name as widget %}Image {{ widget }}{% endblocktrans %}</h4>

<p>{% trans "Color variants:" %}</p>

<p>
{% for color in widget.colors %}
<a href="{{ engage_url_track }}"><img src="{{ color.url }}" /></a>
{% endfor %}
</p>

<div>
<select class="select-tab form-control">
<option value="{{ widget.name }}-html-code">{% trans "HTML code" %}</option>
<option value="{{ widget.name }}-bb-code">{% trans "BB code" %}</option>
<option value="{{ widget.name }}-mdk-code">{% trans "Markdown code" %}</option>
<option value="{{ widget.name }}-rst-code">{% trans "RST code" %}</option>
<option value="{{ widget.name }}-textile-code">{% trans "Textile code" %}</option>
</select>

<div class="tab-content">
<div class="tab-pane active" id="{{ widget.name }}-html-code">
{% for color in widget.colors %}
<textarea class="code-example form-control">
&lt;a href="{{ engage_url_track }}"&gt;
&lt;img src="{{ color.url }}" alt="{% trans "Translation status" %}" /&gt;
&lt;/a&gt;</textarea>
{% endfor %}
</div>

<div class="tab-pane" id="{{ widget.name }}-bb-code">
{% for color in widget.colors %}
<textarea class="code-example form-control">
[url={{ engage_url_track }}][img alt="{% trans "Translation status" %}"]{{ color.url }}[/img][/url]</textarea>
{% endfor %}
</div>

<div class="tab-pane" id="{{ widget.name }}-mdk-code">
{% for color in widget.colors %}
<textarea class="code-example form-control">
[![{% trans "Translation status" %}]({{ color.url }})]({{ engage_url_track }})</textarea>
{% endfor %}
</div>

<div class="tab-pane" id="{{ widget.name }}-rst-code">
{% for color in widget.colors %}
<textarea class="code-example form-control">
.. image:: {{ color.url }}
    :alt: {% trans "Translation status" %}
    :target: {{ engage_url_track }}</textarea>
{% endfor %}
</div>

<div class="tab-pane" id="{{ widget.name }}-textile-code">
{% for color in widget.colors %}
<textarea class="code-example form-control">
!{{ color.url }}!:{{ engage_url_track }}</textarea>
{% endfor %}
</div>
</div>

</div>


{% endfor %}

{% endblock %}

