{% load l10n %}
{% load time_tags %}

{% if banner %}
<div class="l-container">
  <div class="
              annoy-banner
              annoy-banner_{{ banner.place }}
              annoy-banner-style_{{ banner.style }}
              {% if banner.get_image %}with-image{% endif %}
              {% if banner.smallfont %}banner-smallfont{% endif %}
              annoy-banner-clickable
              "
        id="annoy-banner-{{ banner.id }}"
	style="
           {% if banner.text_color %}color: {{ banner.text_color }};{% endif %}
           {% if banner.background_color %}background-color: {{ banner.background_color }};{% endif %}
        ">
    {% if not banner.action_label %}
    <a
      {% if banner.is_external %}target="_blank"{% endif %}
      href="{{ banner.get_url }}">
    {% endif %}
    <div class="annoy-banner-inner">

      {% if banner.get_image %}
      <div>
        <img src="{{ banner.get_image.url }}">
	</div>
      {% endif %}
      <div class="text">
        {{ banner.get_text|safe|linebreaks }}
      </div>




      {% if banner.action_label %}
      <a class="action"
	 {% if banner.is_external %}target="_blank"{% endif %}
	 href="{{ banner.get_url }}">
          {{ banner.action_label }}
        </a>
      {% endif %}
    </div>
    {% if not banner.action_label %}
      </a>
    {% endif %}

    {% if banner.campaign.has_progress %}
	<div class="state-box">
	  <div class="progress-box">
	    <div>
	      <div class="l-checkout__support__bar">
		<span class="{% if banner.campaign.progress_percent < 15 %}little-progress{% endif %}" data-label="{{ banner.campaign.progress_percent|floatformat:"2" }}% ({{ banner.campaign.progress|floatformat:"g" }} zł)" style="width: {{ banner.campaign.progress_percent|stringformat:".3f" }}%;"></span>
	      </div>
	    </div>
	  </div>
          <div class="bar-status-box">
	  <div class="time-box">
	    <strong class="countdown inline" data-until='{{ banner.campaign.end|date_to_utc:True|utc_for_js }}'>&nbsp;</strong>
	  </div>
          <strong>{{ banner.campaign.target|floatformat:"g" }} zł</strong>
          </div>
	</div>
    {% endif %}


  </div>
</div>
{% endif %}