{% extends "Emailing/newsletter.html" %}
{% load i18n coop_edition coop_utils thumbnail %}


{% block body_style %}background: #444; font-family: 'Verdana', sans-serif; font-size: 12px;{% endblock %}

{% block newsletter %}
    {% nlf_css a="color: #000" h3="font-weight: bold;" h2="color: #fff; padding: 2px 5px; background: #888;" "h2 a"="color: #fff;" %}
    {% with news_items=newsletter.items.all %}
    {% cms_edit newsletter %}
    <div style="background: #fff; color: #000; width: 740px; margin: 0 auto;">
        <div style="width: 700px; padding: 20px; ">
			<div style="background: #eee; padding: 10px; color: #fff;">
				<img style="margin: 0 150px; width: 400px;" src="{{STATIC_URL}}img/logo-balafon.png" alt="Balafon"/>
			</div>
		

        <table style="font-size: 12px;"><tr>
          <td style="width: 530px;">
          <h1 style="margin: 5px 0;">{{ newsletter.subject }}</h1>
          {{ newsletter.content }}
          </td>

          <td style="width: 5px;">&nbsp;</td>
          <td style="width: 160px; padding: 20px 10px; vertical-align: top; color: #000; background: #888;">
            {% coop_piece_of_html "newsletter_colright" newsletter.id %}
            <ul style="list-style: none; margin: 0; padding: 2px;">
            {% for item in news_items %}
              <li style="padding: 5px 0; margin-bottom: 25px;">
                <img src="{{STATIC_URL}}img/chevron.png" style="width: 10px; display: inline-block;" />
                <a style="width: 140px; vertical-align: top; text-align: left; display: inline-block; color: #fff;" href="#article-{{item.id}}">{{ item.content_object }}</a>
              </li>
            {% endfor %}
            </ul>
          </td>
        </tr></table>

        {% if news_items %}
        <div>
          <h2 style="margin-bottom: -20px;">{% trans "News" %}</h2>
          <table style="border: none; font-size: 12px;">
          {% for nl_item in news_items %}
            {% with item=nl_item.content_object %}
            <tr style="border: solid 2px #ccc; margin-top: 25px; display: block;">
              <td style="border: none; width: 200px; vertical-align:  top;">
                <a href="{{item.get_absolute_url}}">
                {% with art_img=item.logo_thumbnail %}
                <img style="width: 200px; margin-top: 15px; vertical-align:  top; padding: 0 5px 5px 0;" src="{% if art_img %}{{MEDIA_URL}}{{art_img}}{%else%}{{STATIC_URL}}img/media2.png{%endif%}"/>
                {% endwith %}
                </a>
              </td>
              <td style="border: none; width: 500px; vertical-align:  top;">
                <a name="article-{{nl_item.id}}"><h3>{{item.title}}</h3></a>
                <div class="summary" style="min-height: 100px;">
                  <div>{{item.summary|linebreaksbr}}</div>
                </div>
                <div style="text-align: right; width: 90%; margin-top: 10px; margin-bottom: 15px;">
                  <a style="color: #000; padding: 4px;" href="{{item.get_absolute_url}}">{% trans "Read more"%}</a>
                  </div>
              </td>
            </tr>
            {% endwith %}
			    {% endfor %}
          </table>
        </div>
        {% endif %}
      <hr>
			<div style="margin-top: 20px; color: #888; font-size: 0.9em;">
				<div style="text-align: center; margin: 10px 0">
					{% coop_piece_of_html "newsletter_footer" %}
				</div>
			</div>
		</div>
    </div>
    {% end_cms_edit %}
    {% endwith %}
    {% end_nlf_css %}
{% endblock %}