{% load static %}

<style>
  {% for epopup in event_popup.all %}
    {% if epopup.activate %}
    #epopup_{{ epopup.pk }} .modal-dialog .modal-body {
    background-size: cover;
    background-image: url({% static 'popup/img/'|add:epopup.background|add:'.jpg' %});
    {% if epopup.text_color == 'BL' %}
      color: #082744;
    {% elif epopup.text_color == 'WH' %}
      color: #ffffff;
    {% elif epopup.text_color == 'GR' %}
      color: #444444;
    {% endif %}
    }
    {% endif %}
  {% endfor %}
</style>

<script>
  {% for epopup in event_popup.all %}
    {% if epopup.activate %}
    jQuery(document).ready(function($) {
      if ($.cookie("ecacher-modal_{{ epopup.pk }}")) {
        $("#epopup_{{ epopup.pk }}").remove();
      } else {
        $("#epopup_{{ epopup.pk }}").modal("show");
      }

      $("#epopup_suppress_{{ epopup.pk }}").click(function() {
        if ($(this).is(":checked")) {
            $("#epopup_{{ epopup.pk }}").modal("hide");
            $.cookie("ecacher-modal_{{ epopup.pk }}", true);
        } else {
          $.cookie("ecacher-modal_{{ epopup.pk }}", false);
        }
      })
    });
    {% endif %}
  {% endfor %}
</script>

<!-- Event Popup Modal -->
{% for epopup in event_popup.all %}
  {% if epopup.activate %}
  <div class="modal fade" id="epopup_{{ epopup.pk }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
       aria-labelledby="estaticBackdropLabel_{{ epopup.pk }}" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="estaticBackdropLabel_{{ epopup.pk }}">{{ epopup.title }}</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="container">
            <h4 class="text-center">{{ epopup.subtitle }}</h4>
            {% autoescape off %}
            <p class="text-center">{{ epopup.description }}</p>
            {% endautoescape %}
          </div>
        </div>
        {% if epopup.url %}
        <div class="modal-footer justify-content-between">
        {% else %}
        <div class="modal-footer justify-content-start">
        {% endif %}
          <div class="popup-check">
            <input type="checkbox" id="epopup_suppress_{{ epopup.pk }}" />
            <label for="epopup_suppress_{{ epopup.pk }}" data-id="checkbox_text">
                다시보지않기
            </label>
          </div>
          {% if epopup.url %}
          <a href="{{ epopup.url }}" target="_blank">자세히보기</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endif %}
{% endfor %}