{% if inject_in_the_body %}

  <style>

    .mt-count-down {
      background-color: {{ background }};
    }
    .mt-count-down__title {
      color: {{ title_color }};
    }
    .mt-count-down__notes {
      color: {{ notes_color }};
    }
    .mt-count-down__message {
      color: {{ message_color }};
    }
    .mt-count-down__hint {
      color: {{ message_color }};
    }
    .mt-count-down__daysto {
      color: {{ notes_color }};
    }
    .mt-count-down__button {
      background-color: {{ button_background }};
      color: {{ button_color }};
    }

  </style>

  <div class="{{ predefined_palettes }} mt-count-down-inject mt-count-down alert alert-dismissible fade show" role="alert">

    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>

    <div class="container">
      <div class="row">

        <div class="col-md-7">
          <div class="row align-items-center">
            <div class="col-lg-8 col-12">

              <div class="mt-count-down__title">
                {% if title %}
                  {{ title|t }}
                {% endif %}
              </div>

              <div class="mt-count-down__message">
                {% if prompt_message %}
                  {{ prompt_message|t }}
                {% endif %}
              </div>
 
              {% if hint_text %}
                <div class="mt-count-down__hint">{{ hint_text }}</div>
              {% endif %}
 
            </div>

            <div class="col-lg-4 col-12 text-md-right text-lg-left text-center">
              {% if target_url and dismiss_text %}
                <a href="{{ target_url }}" class="mt-count-down__button">{{ dismiss_text|t }}</a>
              {% endif %}
            </div>

          </div>
        </div>

        <div class="col-md-5">
          <div class="mt-count-down__daysto">
            <span class="mt-count-down__notes">
              {% if days_to %}
                {{ days_to|t }}</span>
              {% endif %}
            <div class="mt-count-down-slot"></div>
          </div>
        </div>

      </div>  <!-- / .row -->
    </div> <!-- /.container -->
  </div>

{% endif %}
