<div class="fulfillment-header">
    <span>Merchize Print Area</span>
</div>

<div class="location-design grid-2col">
    <div class="location-design-item" ng-repeat="(location, designFile) in item.merchizeData.artworks">
        <div class="pop-print-location">
            @{{ location }}
        </div>
        <div class="design-image design-image-@{{ item.id }}" style="background-color: @{{ merchize_getColorCode(item) }}">
            <button class="click-up-design" ng-if="!designFile.url" ngf-select="merchize_uploadImages($files, item, designFile)">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"/> <path d="M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25" /> <path d="M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> <path d="M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /> </svg>
                <span>Click to upload design</span>
            </button>

            <img ng-if="designFile.url" ngf-select="merchize_uploadImages($files, item, designFile)"
                ng-src="@{{ getImageCdn(designFile.url, 540, 540) }}" alt="file design" src="/images/blank.gif"/>
        </div>

        <div class="form-group paste-design-url">
            <input ng-model="designFile.url"
                onClick="this.select();"
                ng-change="merchize_changeDesignUrl(item)" type="text"
                placeholder="Paste Design Url Here" class="form-control">
            <a ng-if="!item.merchizeData.states.uploading"
                ngf-select="merchize_uploadImages($files, item, designFile)"
                class="btn-upload-image">
                <i class="fa fa-cloud-upload" aria-hidden="true"></i> Choose file
            </a>
            <span class="btn-upload-image" ng-if="item.merchizeData.states.uploading">
                <svg xmlns="http://www.w3.org/2000/svg" class="loadingIcon" width="16" height="16" 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>
                Uploading...
            </span>
        </div>

        <div class="available-designs-area">
            <div class="available-designs-area-item" ng-class="{'selected-design': design.selected, 'uncomfirm': !design.is_design_comfirm}"
                ng-repeat="design in item.merchizeData.patternDesigns">
                <button class="btn btn-xs btn-zoom-design" 
                    data-magnify="gallery" 
                    href="@{{ design.url }}"
                    ng-data-src="@{{ design.url }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"/>
                        <path d="M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z"/>
                        <path fill-rule="evenodd" d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z"/>
                    </svg>
                </button>
                <img ng-click="merchize_chooseDesign(design, designFile, item)" width="80" height="80" ng-src="@{{ getImageCdn(design.url, 360, 360) }}" alt="available design" src="/images/blank.gif">
                <div class="text-danger">@{{design.resolution}}</div>
            </div>
        </div>
    </div>
</div>