<div class="board-tool-section download-tool-section" id="downloadPannel"
     style="display: none"
>
    <div class="board-tool-wrapper">
        <button class="main-tool board-tool-btn" onclick="showMenus('downloadPannel')">
            <svg class="left-tool-close" xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 129.94 129.94">
                <g data-name="Layer 2">
                    <g data-name="Layer 1">
                        <path
                            d="M112.06,0H0V112.06a17.88,17.88,0,0,0,17.88,17.88h94.18a17.87,17.87,0,0,0,17.88-17.88V17.88A17.88,17.88,0,0,0,112.06,0Zm12.88,112.06a12.9,12.9,0,0,1-12.88,12.88H17.88A12.9,12.9,0,0,1,5,112.06V5H112.06a12.9,12.9,0,0,1,12.88,12.88ZM102,40,77,65l25,25a8.5,8.5,0,1,1-12,12L65,77,40,102a8.5,8.5,0,1,1-12-12L53,65l-25-25a8.5,8.5,0,1,1,12-12L65,53l25-25a8.5,8.5,0,1,1,12,12Z"></path>
                    </g>
                </g>
            </svg>
            <svg class="left-tool-button" xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 148.75 164.78">
                <g data-name="Layer 2">
                    <g data-name="Layer 1">
                        <path
                            d="M145.88,66.36a10.57,10.57,0,0,0-7.94-3.51h-4.25c-.84-4.51-4.29-7.92-8.38-7.92H108.05l20.67-29.29H101.66V0h-26V25.64h-27l2,2.79s6.77,9.62,18.28,25.94c.12.19.25.37.39.56H51.35V50.54c0-5.51-3.84-10-8.55-10H8.55C3.87,40.53,0,45,0,50.54v101a11.27,11.27,0,0,0,1.32,5.32h0v0a10.46,10.46,0,0,0,8.58,7.72,10.08,10.08,0,0,0,1.75.15H128.42c6.27,0,11.88-5.29,12.52-11.79l7.74-77.73A11.51,11.51,0,0,0,145.88,66.36Zm-17.46,92.27H11.66a4.55,4.55,0,0,1-.76-.07c-2.48-.37-4.13-2.75-3.82-5.57l7.61-76.8.09-.92c.35-3.4,3.28-6.27,6.4-6.27H137.94a4.48,4.48,0,0,1,3.37,1.48,5.3,5.3,0,0,1,1.25,4.15l-7.74,77.76C134.49,155.77,131.56,158.63,128.42,158.63ZM79.23,3.54H98.12V29.18h23.77L105.54,52.36,98.12,62.85H79.24l-6.34-9-.11-.16c-.32-.43-.66-.89-1-1.37C63.93,41.18,58.27,33.14,55.49,29.18H79.23Z"/>
                    </g>
                </g>
            </svg>
        </button>
        <div class="download-section d-flex">
            <div class="download-image-preview">
                <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjAiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNNjQgOS43NUE1NC4yNSA1NC4yNSAwIDAgMCA5Ljc1IDY0SDBhNjQgNjQgMCAwIDEgMTI4IDBoLTkuNzVBNTQuMjUgNTQuMjUgMCAwIDAgNjQgOS43NXoiIGZpbGw9IiMwMDAwMDAiIGZpbGwtb3BhY2l0eT0iMSIvPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiBmcm9tPSIwIDY0IDY0IiB0bz0iMzYwIDY0IDY0IiBkdXI9IjE4MDBtcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2c+PC9zdmc+" alt="">
            </div>
            <div class="download-image-detail">
                <div class="d-flex flex-column ">
                    <div class="w-100 file-option-header" >
                        <h5 class="file-detail_heading">File Type</h5>
                    </div>
                    <div class="d-flex mb-2" >
                        {{--                        <div class="file-details-type-wrapper mb-1" style="border: 2px solid green" >--}}
                        <div class="pretty p-default p-round "
                             data-tippy-content="JPG format: small filesize, best for webpages">
                            <input type="radio" value="jpg" checked data-detail="- JPG format for online use"
                                   name="export_filetype">
                            <div class="state p-info">
                                <label>JPG</label>
                            </div>
                        </div>

                        <div class="pretty p-default p-round"
                             data-tippy-content="PNG format: medium filesize, good for print or webpages">
                            <input type="radio" value="png"
                                   data-detail="- PNG format: medium filesize, good for print or webpages"
                                   name="export_filetype">
                            <div class="state p-info">
                                <label>PNG</label>
                            </div>
                        </div>
{{--                        <div class="pretty p-default p-round"--}}
{{--                             data-tippy-content="SVG format: vector format for large display or printing without losing quality">--}}
{{--                            <input type="radio" value="svg"--}}
{{--                                   data-detail="- SVG format: vector format for large display or printing without losing quality"--}}
{{--                                   name="export_filetype">--}}
{{--                            <div class="state p-info">--}}
{{--                                <label>SVG</label>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="pretty p-default p-round" data-tippy-content="PDF format: best for print">
                            <input type="radio" value="pdf" data-detail="- PDF format: best for print"
                                   name="export_filetype">
                            <div class="state p-info">
                                <label>PDF</label>
                            </div>
                        </div>
                    </div>
                    <div class="w-100 export-resolution-display file-option-header">
                        <h5 class="file-detail_heading">Export resolution</h5>
                    </div>
                    <div class="d-flex export-resolution-display mb-2 ">
                        <div class="pretty p-default p-round export-resolution-display"
                             data-tippy-content="Original quality for display on screen">
                            <input type="radio" checked value="96" data-detail="- Original quality for display on screen"
                                   name="export_resolution">
                            <div class="state p-info">
                                <label>96 dpi</label>
                            </div>
                        </div>
                        <div class="pretty p-default p-round export-resolution-display" data-tippy-content="High quality for print">
                            <input type="radio" value="300" data-detail="- High quality for print"
                                   name="export_resolution">
                            <div class="state p-info">
                                <label>300 dpi</label>
                            </div>
                        </div>
                    </div>

                    <div class="w-100 file-option-header">
                        <h5 class="file-detail_heading">Options</h5>
                    </div>
                    <div class="pretty p-default"
                         data-tippy-content="Crop export to contents">
                        <input type="checkbox" onclick="cropOutputToContents()"
                               id="export_crop">
                        <div class="state p-info">
                            <label>Crop to contents</label>
                        </div>
                    </div>
                    <div class="flex-grow-1">
                        &nbsp;
                    </div>
                    <div class="w-100 file-option-header ">
                        <h5 class="file-detail_heading">Export summary</h5>
                    </div>
                    {{--                    Feedback for selection--}}
                    <ul style="list-style-type: none">
                        <li id="export_filetype_detail">
                            - JPG format for online use
                        </li>
                        <li class="w-100 export-resolution-display" id="export_resolution_detail">
                            - Original quality for display on screen
                        </li>
                        <li class="w-100" id="export_cropped">
                        </li>
                    </ul>
                </div>


            </div>

        </div>
        <button type="button" class="chart-insert-btn file-download-btn"
                onclick="downloadArtboard()">Export
        </button>
    </div>
</div>
