
<link href="https://releases.transloadit.com/uppy/v2.3.1/uppy.min.css" rel="stylesheet">

    {{template "top" .}}
    <style type="text/css">
        .line { width:100%; text-align:left; border-bottom: 1px solid #8f8f8f; line-height:0.1em; margin:10px 0 20px; color: #8f8f8f; }
        .line span { background:#fff; padding:0 10px; margin-left: 50px; }
    </style>
    <link rel="stylesheet" href="/public/croppie.css" />
    <script src="/public/croppie.js"></script>
    <div class="container" style="margin-top: 100px;">
        <div class="row">
            <div class="col-md-3">
                {{template "gallery_nav" .}}
            </div>

            <div class="col-md-9">
                <div id="drag-drop-area"></div>
            </div>

        </div>
    </div>


    <script src="https://releases.transloadit.com/uppy/v2.3.1/uppy.min.js"></script>
    <script>
        const { Instagram } = Uppy
        const { Dashboard } = Uppy
        var uppy = new Uppy.Core()
            .use(Uppy.Dashboard, {
                inline: true,
                target: '#drag-drop-area'
            })
            .use(Uppy.XHRUpload, {endpoint: '/file/upload?id={{.id}}'})
            //.use(Instagram, { target: Dashboard, companionUrl: 'https://companion.uppy.io' })

        uppy.on('complete', (result) => {
            console.log('Upload complete! We’ve uploaded these files:', result.successful)
        })
    </script>
{{template "bottom" .}}