<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Template
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="pdapp-downloadbox modal-body" v-if="modal.type == 'download'">
    <div class="position-relative">
        <div class="row" v-if="Object.keys(designsData).length">
            <template v-for="(vdata, vid) in designsData">
                <template v-for="(adata, aid) in vdata">
                    <div class="pdapp-dowload-item position-relative" :class="Object.keys(designsData).length + 2 < Object.keys(vdata).length ? 'col-12 col-md-6 col-xl-4 col-xxl-3' : 'col-'+ 12/(Object.keys(designsData).length + Object.keys(vdata).length)" v-if="adata.svg != null" :key="aid">
                        <div class="card card-inverse mb-2 border d-flex flex-column justify-content-center align-items-center bg-light" v-if="adata.svg != ''">
                            <img class="card-img img-fluid" :src="adata.svg" :alt="adata.view +' - '+ adata.area">
                            <div class="card-img-overlay p-1">
                                <div class="d-flex flex-column justify-content-between h-100">
                                    <h5 class="header-title fs-6 m-0 p-0">{{ adata.view }} - {{ adata.area }}</h5>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-primary tooltip-top-left" :data-tooltip="langs.topbar.click_to_download" :title="langs.topbar.click_to_download" @click="startDownload('svg', vid, aid)">SVG</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pdapp-download-design placeholder-glow" v-else><span class="placeholder pdapp-h120 bg-secondary d-block border rounded-2"></span></div>
                    </div>
                </template>
            </template>
        </div>

        <template v-if="designsTeam.length">
            <div class="w-100 border-top pt-1 mt-1">
                <div class="header-title fs-6 m-0 pb-1">{{ langs.topbar.team_members }}</div>
                <div class="row">
                    <template v-for="(team, tid) in designsTeam">
                        <div v-if="team.svg == undefined || team.svg.length == 0" class="placeholder-glow"><span class="placeholder"></span></div>
                        <div v-else class="pdapp-dowload-item position-relative col-12 col-md-6 col-xl-4 col-xxl-3" v-for="(svg, sid) in team.svg" :key="sid">
                            <div class="card card-inverse mb-2 border d-flex flex-column justify-content-center align-items-center bg-light">
                                <img class="card-img img-fluid" :src="svg.svg" alt="Team">
                                <div class="card-img-overlay p-1">
                                    <div class="d-flex flex-column justify-content-between h-100">
                                        <h5 class="header-title fs-6 m-0 p-0 d-flex flex-column"><small v-if="team.name != undefined">{{ team.name }}</small><small v-if="team.number != undefined">{{ team.number }}</small></h5>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-sm btn-primary" :title="langs.topbar.click_to_download" @click="startDownload('svg', tid, sid, 'team')">SVG</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="pdapp-loading-mask" v-if="svg.loading">
                                    <div class="pdapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </template>
        <div class="pdapp-loading-mask pdapp-loading-page" v-if="modal.loading">
            <div class="pdapp-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
        </div>
    </div>
</div>