@extends('component-base.layout')

@section('title')
    Upload
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/upload/upload.css?v={{config("sns-line.version")}}">
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="lme-flex lme-flex-col" style="gap: 20px;">
            <div class="lme-flex lme-flex-col lme-card" style="gap: 20px;">
                <lme-upload size="lg"
                            v-model="form.files"
                            :multiple="true"
                            accept=".jpg,.png,.pdf"
                            googleapis
                            @google-drive-click="googleDriveClicked">
                </lme-upload>

                @if(env("APP_ENV") === "local")
                    <button style="width: 150px" @click="uploadFiles">upload</button>
                @endif
            </div>

            <div class="lme-flex lme-flex-col lme-card" style="gap: 20px;">
                <lme-upload size="md"
                            v-model="form.uploads"
                            :multiple="true"
                            accept=".jpg,.png,.pdf"
                            googleapis
                            @google-drive-click="googleDriveClicked">
                </lme-upload>

                @if(env("APP_ENV") === "local")
                    <button style="width: 150px" @click="uploadFiles2">upload</button>
                @endif
            </div>

            <div class="lme-flex lme-flex-col lme-card" style="gap: 20px;">
                <lme-upload size="sm"
                            v-model="form.statics"
                            :multiple="true"
                            accept=".jpg,.png,.pdf"
                            googleapis
                            @google-drive-click="googleDriveClicked">
                </lme-upload>

                @if(env("APP_ENV") === "local")
                    <button style="width: 150px" @click="uploadFiles3">upload</button>
                @endif
            </div>

            <div class="lme-flex lme-flex-col lme-card" style="gap: 20px;">
                <div style="width: 384px">
                    <lme-upload size="md"
                                v-model="form.drags"
                                :multiple="true"
                                accept=".jpg,.png,.pdf"
                                googleapis
                                trigger="drag"
                                file-size-recommend="0000×000px"
                                @change="fileChange"
                                @google-drive-click="googleDriveClicked">
                    </lme-upload>
                </div>

                @if(env("APP_ENV") === "local")
                    <button style="width: 150px" @click="uploadFiles4">upload</button>
                @endif
            </div>

            <div class="lme-flex lme-flex-col lme-card" style="gap: 20px;">
                <div style="width: 570px">
                    <lme-upload size="md"
                                v-model="form.preview"
                                :multiple="true"
                                accept=".jpg,.png"
                                googleapis
                                trigger="preview"
                                @change="fileChange"
                                :max-file="3"
                                @google-drive-click="googleDriveClicked">
                    </lme-upload>
                </div>

                @if(env("APP_ENV") === "local")
                    <button style="width: 150px" @click="uploadFiles5">upload</button>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/component-base/upload/lme-upload.js"></script>
    <script src="/js/component-base/upload/upload.js?v={{config("sns-line.version")}}"></script>
@endpush