<div id="infoModalPrintify" class="info-modal" ng-cloak>
    <!-- Modal content -->
    <div class="info-modal-content" style="overflow-y: auto;">
        <div class="d-flex" ng-repeat="(printifyOrderInfoIndex, printifyOrderInfo) in printifyOrderInfos">
            <div class="col-md-8">
                <div ng-repeat="item in printifyOrderInfo.line_items">
                    <div>
                        <h3>@{{ item.metadata.title }}</h3>
                        <p style="font-size: 20px;" class="d-flex">
                            SKU @{{ item.metadata.sku }} &sdot; @{{ item.metadata.variant_label }}
                        </p>
                        <p class="d-flex">Printed in @{{ item.metadata.country }} by Printify Choice</p>
                    </div>
                    <div class="mt-2">
                        <div class="d-flex justify-content-between">
                            <p class="col-md-6">Retail price</p>
                            <p class="d-flex col-md-6">
                                USD @{{ formatCentToDollar(printifyOrderInfo.total_price) }}
                            </p>
                        </div>
                        <div class="d-flex justify-content-between">
                            <p class="col-md-6">Shipping cost</p>
                            <p class="d-flex col-md-6">
                                USD @{{ formatCentToDollar(printifyOrderInfo.total_shipping) }}
                            </p>
                        </div>
                        <div class="d-flex justify-content-between">
                            <p class="col-md-6">Production costs</p>
                            <p class="d-flex col-md-6">
                                USD @{{ formatCentToDollar(printifyOrderInfo.total_price -
                                printifyOrderInfo.total_shipping) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <h5>Customer</h5>
                <div class="mt-2">
                    <p class="bold">Personal details</p>
                    <p class="d-flex">@{{ printifyOrderInfo.address_to.first_name }} @{{
                        printifyOrderInfo.address_to.last_name }}</p>
                    <p>@{{ printifyOrderInfo.address_to.email }}</p>
                    <p>@{{ printifyOrderInfo.address_to.phone }}</p>
                </div>
                <div class="mt-4">
                    <p class="bold">Shipping address</p>
                    <p>@{{ printifyOrderInfo.address_to.address1 }}</p>
                    <p>@{{ printifyOrderInfo.address_to.address2 }}</p>
                    <p>@{{ printifyOrderInfo.address_to.city }}</p>
                    <p>@{{ printifyOrderInfo.address_to.company }}</p>
                </div>
            </div>
            <div class="col-md-12" ng-show="printifyProductInfos[printifyOrderInfoIndex].id">
                <img ng-src="@{{ printifyProductInfos[printifyOrderInfoIndex].images[0].src }}" width="100" height="100">
            </div>
            <hr ng-if="printifyOrderInfoIndex != printifyOrderInfos.length - 1" style="border: 1px solid black;">
        </div>
        <div class="text-center p-2">
            <button class="btn" onclick="document.getElementById('infoModalPrintify').style.display = 'none'">
                Close
            </button>
        </div>
    </div>
</div>