<div id="DesignModalPrintify" class="error-modal">
    <!-- Modal content -->
    <div class="error-modal-content printify-modal-content">
        <div class="loading-design-box" ng-if="loadingDesign">
            <svg xmlns="http://www.w3.org/2000/svg" width="52" height="52" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 6l0 -3" /> <path d="M16.25 7.75l2.15 -2.15" /> <path d="M18 12l3 0" /> <path d="M16.25 16.25l2.15 2.15" /> <path d="M12 18l0 3" /> <path d="M7.75 16.25l-2.15 2.15" /> <path d="M6 12l-3 0" /> <path d="M7.75 7.75l-2.15 -2.15" /> </svg>
        </div>

        <canvas style="width: 1px" id="c"></canvas>
        <hr ng-if="!loadingDesign" style="opacity: .3">
        <div style="display: flex; width: 100%" ng-if="!loadingDesign">
            <div>
                <label for="">Printify Converted Data</label><br>
                <table class="info-design-position">
                    <tr>
                        <td>Width:</td>
                        <td>
                            <input onClick="this.select();"
                                class="form-control"
                                ng-model="designPosition.width"
                                ng-change="changeDesignDimensions('width')" 
                                ng-keyup="changeDesignDimensions('width')" 
                                id="designWidth" type="number" style="width: 60px;"> cm</td>
                        <td style="padding-left: 25px">Height:</td>
                        <td>
                            <input onClick="this.select();" 
                                class="form-control"
                                ng-model="designPosition.height"
                                ng-change="changeDesignDimensions('height')" 
                                ng-keyup="changeDesignDimensions('height')" 
                                id="designHeight" type="number" style="width: 60px;"> cm</td>
                        <td style="padding-left: 25px">Top:</td>
                        <td colspan="2">
                            <input onClick="this.select();" 
                                class="form-control"
                                ng-model="designPosition.topPercent"
                                ng-change="changeDesignTop()" 
                                ng-keyup="changeDesignTop()" 
                                id="designTop"  type="number" style="width: 60px;"> %</td>
                    </tr>
                    <tr>
                        <td>X: </td>
                        <td id="designX"></td>
                        <td style="padding-left: 25px">Y: </td>
                        <td id="designY"></td>
                        <td style="padding-left: 25px">
                            <button class="btn btn-default btn-xs" ng-click="changeDesign2CenterV()"> 
                                <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z"/></svg>
                            </button>
                        </td>
                        <td>
                            <button class="btn btn-default btn-xs" ng-click="changeDesign2Top()"> 
                                <svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/></svg>
                            </button>
                        </td>
                        <td>
                            <button class="btn btn-default btn-xs" ng-click="changeDesign2Right()"> 
                                <svg style="transform: rotate(90deg);" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/></svg>
                            </button>
                        </td>
                        <td>
                            <button title="Reset" class="btn btn-default btn-xs" ng-click="resetDesignPosition()"> 
                                <svg xmlns="http://www.w3.org/2000/svg" height="20px" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M6,13c0-1.65,0.67-3.15,1.76-4.24L6.34,7.34C4.9,8.79,4,10.79,4,13c0,4.08,3.05,7.44,7,7.93v-2.02 C8.17,18.43,6,15.97,6,13z M20,13c0-4.42-3.58-8-8-8c-0.06,0-0.12,0.01-0.18,0.01l1.09-1.09L11.5,2.5L8,6l3.5,3.5l1.41-1.41 l-1.08-1.08C11.89,7.01,11.95,7,12,7c3.31,0,6,2.69,6,6c0,2.97-2.17,5.43-5,5.91v2.02C16.95,20.44,20,17.08,20,13z"/></g></g></svg>    
                            </button>
                        </td>
                    </tr>
                    <tr>
                        <td>Scale: </td>
                        <td>
                            <span id="designScale"></span>%
                        </td>
                        <td style="padding-left: 25px">Angle: </td>
                        <td id="designAngle"></td>
                        <td style="padding-left: 25px">
                            <button class="btn btn-default btn-xs" ng-click="changeDesign2CenterH()"> 
                                <svg style="transform: rotate(-90deg);" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z"/></svg>
                            </button>
                        </td>
                        <td>
                            <button class="btn btn-default btn-xs" ng-click="changeDesign2Left()"> 
                                <svg style="transform: rotate(-90deg);" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/></svg>
                            </button>
                        </td><td>
                            <button class="btn btn-default btn-xs" ng-click="changeDesign2Bottom()"> 
                                <svg style="transform: rotate(180deg);" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"/></svg>
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="width: 300px; margin-left: auto" class="text-right">
                <div class="printify-modal-action">
                    <button class="btn btn-primary" ng-click="applyDesignPosition()">Apply</button>
                    <button class="btn btn-default" onclick="document.getElementById('DesignModalPrintify').style.display = 'none'">Close</button>
                </div>
            </div>
        </div>
    </div>

</div>