@extends('component-base.layout')

@section('title')
    N - 通知
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/alert/alert.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/layout-demo/layout-n.css?v={{config("sns-line.version")}}">
    <style>
        /*.lme-wrapper .banner {*/
        /*    padding-top: 0;*/
        /*    padding-bottom: 0;*/
        /*}*/
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <div class="lme-wrapper lme-flex lme-flex-col" style="gap: 10px;">
            <lme-alert v-model="alert1"
                       message="決済エラーが発生しています"
                       type="error"
                       width="100%"
                       banner
                       height="40px"
                       button-detail>
            </lme-alert>

            <lme-alert v-model="alert2"
                       message="警告○○○○○○○○○○"
                       type="warning"
                       width="100%"
                       banner
                       height="40px"
                       button-detail>
            </lme-alert>

            <lme-alert v-model="alert3"
                       message="成功○○○○○○○○○○"
                       type="success"
                       width="100%"
                       banner
                       height="40px"
                       button-detail>
            </lme-alert>

            <lme-alert v-model="alert4"
                       message="info○○○○○○○○○○"
                       type="info"
                       width="100%"
                       banner
                       height="40px"
                       button-detail>
            </lme-alert>
        </div>
    </div>
@endsection

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