{% if popup.is_active %}
    <div class="popup page-popup d-none d-lg-block popup_{{ popup.id }}"
         style="top: {{ popup.pos_y }}; left: {{ popup.pos_x }};"
         data-popup-id="{{ popup.id }}">
        <div class="card" style="display:none;">
            {% if popup.image %}
                <img src="{{ popup.image.url }}" class="img-fluid"/>
            {% else %}
                <div class="card-body">
                    {{ popup.content|safe }}
                </div>
            {% endif %}

            <div class="card-footer">
                <button type="button" class="popup-close close" data-popup-id="{{ popup.id }}">
                    <span aria-hidden="true">&times;</span>
                </button>

                <div class="form-group form-inline mb-0 ">
                    <input class="ignore-check" type="checkbox" id="dismiss" data-popup-id="{{ popup.id }}"/> <label
                        for="dismiss"> &nbsp;오늘 다시 보지 않기</label>
                </div>
            </div>
        </div>
    </div>

    <div class="container popup p-3 d-block d-lg-none popup_{{ popup.id }}" data-popup-id="{{ popup.id }}">
        <div class="card">
            <div class="card-body">
                {{ popup.content|safe }}
            </div>
            <div class="card-footer">
                <button type="button" class="popup-close close" data-popup-id="{{ popup.id }}">
                    <span aria-hidden="true">&times;</span>
                </button>

                <div class="form-group form-inline mb-0 ">
                    <input class="ignore-check" type="checkbox" id="dismiss" data-popup-id="{{ popup.id }}"/>
                    <label for="dismiss"> &nbsp;오늘 다시 보지 않기</label>
                </div>
            </div>
        </div>
    </div>
{% endif %}