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

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

<div class="tablet-form-rows">
<div class="tablet-form-passcode">
    <p>URL: <a class="web-domain" target="_Blank" href="http://{{ tabletSubdomain }}.budguide.io">{{ tabletSubdomain }}.budguide.io</a>
</div>
    <div class="tablet-form-col">
        <div class="tablet-form-element">
            {{ form_three }}
        </div>
        <div class="tablet-form-element">
            {{ form_two }}
        </div>
    </div>

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

    <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/WebCheckoutMessage.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/WebSubmitOrder.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/WebCatalogNotes.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/WebClosingEmail.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/WebCheckoutMessageView.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/WebSubmitOrderView.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/WebCatalogNotesView.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/WebClosingEmailView.png" alt="Web Closing Email">
        </div>
    </div>
</div>