@extends('component-base.layout')

@section('title')
    Toast
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/toast/toast.css?v={{config("sns-line.version")}}">
    <link rel="stylesheet" href="/css/component-base/button/button.css?v={{config("sns-line.version")}}">
    <style>
        .wrapper-sample {
            margin: 20px;
        }

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

@section('contents')
    <div id="vue-element">
        <div class="wrapper-sample">
            <lme-button-flat type="primary" @click="showToast('ノーマルな通知', 'info')">Toast Normal</lme-button-flat>
        </div>

        <div class="wrapper-sample">
            <lme-button-flat type="primary" @click="showToast('成功した時の通知', 'success')">Toast Success</lme-button-flat>
        </div>

        <div class="wrapper-sample">
            <lme-button-flat type="primary" @click="showToast('失敗、エラー、アラート通知', 'error')">Toast Error</lme-button-flat>
        </div>

        <div class="wrapper-sample">
            <lme-button-flat type="primary" @click="showToast('警告時のアラート', 'warning')">Toast Warning</lme-button-flat>
        </div>

    </div>
@endsection

@push('js')
    <script src="/js/component-base/toast/lme-toast.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/toast/toast.js?v={{config("sns-line.version")}}"></script>
@endpush