{{ attach_library('budvue/print-script') }}  
{{ attach_library('ajax_link/ajaxLink') }}

<div class="storeTitle">{{ store_title }}</div>

<div class="tablet-form-rows">
<div class="tablet-form-passcode">
    <p>Passcode: <strong>{{ tabletPasscode }}</strong>
</div>
    <div class="tablet-form-col">
        <div class="tablet-form-element">
            {{ form_one }}
        </div>
        <div class="tablet-form-element">
            {{ form_two }}
        </div>
    </div>

    <div class="tablet-form-col">
        <div class="tablet-form-element">
            {{ form_three }}
        </div>
        <div class="tablet-form-element tablet-smart-tags-col">
            {{ form_four }}
        </div>
    </div>

    {% if show_banner_images %}
    <div class="tablet-form-col">
        <div class="tablet-form-element form-tablet-banner-images">
            {{ form_tablet_banner_images }}
        </div>
    </div>
    {% endif %}

    <div class="tablet-form-col">
        <div class="tablet-form-element web-checkout-message">
            {{ form_web_checkout_message }}
            <div class="image-element">
                <a href="#modalCheckoutMessage" class="open-modal">
                    <img src="/modules/custom/cstv_main/images/TabletCheckoutMessage.png" alt="Web Checkout Message">
                </a>
            </div>
        </div>
    </div>

    <div class="tablet-form-col">
        <div class="tablet-form-element web-checkout-message">
            {{ form_web_submit_order_instructions }}
            <div class="image-element">
                <a href="#modalSubmitOrder" class="open-modal">
                    <img src="/modules/custom/cstv_main/images/TabletSubmitOrder.png" alt="Web Submit Order">
                </a>
            </div>
        </div>
    </div>

    <div class="tablet-form-col">
        <div class="tablet-form-element web-checkout-message">
            {{ form_web_catalog_note }}
            <div class="image-element">
                <a href="#modalCatalogNote" class="open-modal">
                    <img src="/modules/custom/cstv_main/images/TabletCatalogNotes.png" alt="Web Catalog Notes">
                </a>
            </div>
        </div>
    </div>

    <div class="tablet-form-col">
        <div class="tablet-form-element web-checkout-message">
            {{ form_web_closing_email_message }}
            <div class="image-element">
                <a href="#modalClosingEmail" class="open-modal">
                    <img src="/modules/custom/cstv_main/images/TabletClosingEmail.png" alt="Web Closing Email">
                </a>
            </div>
        </div>
    </div>

     <!-- Modal Structure -->
    <div id="confirmationModal" class="confirmationModal" tabindex="-1" role="dialog" style="display: none;">
        <div class="confirmationModal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeConfirmation">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Updating this field will change the information for both your Web and Tablet applications.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="confirmButton">Confirm</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal" id="cancelButton">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Structures -->
    <div id="modalCheckoutMessage" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <img src="/modules/custom/cstv_main/images/TabletCheckoutMessageView.png" alt="Web Checkout Message">
        </div>
    </div>

    <div id="modalSubmitOrder" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <img src="/modules/custom/cstv_main/images/TabletSubmitOrderView.png" alt="Web Submit Order">
        </div>
    </div>

    <div id="modalCatalogNote" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <img src="/modules/custom/cstv_main/images/TabletCatalogNotesView.png" alt="Web Catalog Notes">
        </div>
    </div>

    <div id="modalClosingEmail" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <img src="/modules/custom/cstv_main/images/TabletClosingEmailView.png" alt="Web Closing Email">
        </div>
    </div>
</div>