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

{% if banner %}
<div class="
	    annoy-banner_crisis-container
            annoy-banner-style_{{ banner.style }}
	    ">
  <div class="
              annoy-banner
              annoy-banner_{{ banner.place }}
              {% if banner.image %}with-image{% endif %}
              {% if banner.smallfont %}banner-smallfont{% endif %}
              "
        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 %}

        ">
    <div class="annoy-banner-inner">

      <div class="image-box">
	{% if banner.image %}
	<img src="{{ banner.image.url }}">
	{% endif %}
      </div>

      <div class="text-box">
	<div class="text">
          {{ banner.get_text|safe|linebreaks }}
	</div>

	<div class="state-box">
	  <div class="progress-box">
	    <div>
	      <div class="l-checkout__support__bar">
		<span data-label="{{ banner.progress_percent_pretty }}%" style="width: {{ banner.progress_percent|stringformat:".3f" }}%;"></span>
	      </div>
	    </div>
	  </div>
	  <div class="time-box">
	    <strong class="countdown inline" data-until='{{ banner.until|date_to_utc:True|utc_for_js }}'>&nbsp;</strong>
	  </div>
	  <div class="action-box">
	    {% if banner.action_label %}
            <a class="action" href="{{ banner.url }}">
              {{ banner.action_label }}
            </a>
	    {% endif %}
	  </div>
	</div>
      </div>



    </div>
  </div>
  </div>

{% endif %}