@extends('component-base.layout')

@section('title')
    Preview
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/preview/image.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/preview/phone_mockup.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/preview/message.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/preview/action.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/slide/slide.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/button/button.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/tooltip/tooltip.css?v={{config("sns-line.version")}}">
    <style>
        .wrap-sample {
            margin: 20px 20px 0 20px;
        }

        button {
            cursor: pointer;
        }
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="wrap-sample">
            <lme-button-flat class="lme-btn" @click="showPreview = true">Preview Image</lme-button-flat>

            <lme-preview-image
                    v-model="showPreview"
                    src="/images/preview-image-sample.jpg"
            ></lme-preview-image>
        </div>
    </div>
@endsection

@push('js')
    <script src="/js/component-base/slide/lme-slider.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/tooltip/lme-tooltip.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/preview/lme-preview-image.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/preview/lme-phone-mockup.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/preview/lme-preview-message.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/preview/lme-preview-action.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-flat.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/button/lme-button-default.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/preview/preview.js?v={{config("sns-line.version")}}"></script>
@endpush