@extends('component-base.layout')

@section('title')
Alert
@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/toast/toast.css?v={{config("sns-line.version")}}">
<link rel="stylesheet" href="/css/component-base/button/button.css?v={{config("sns-line.version")}}">

<style>
    #vue-element {
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
    }
    .wrapper-sample {
        width: 100%;
        padding: 10px 20px 0 20px;
    }
    h2 {
        margin-left: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .title-toast {
        font-weight: 700;
        font-size: 20px;
        color: #1F1F1F;

        display: flex;
        align-items: center;
    }
    .title-toast span {
        font-weight: 400;
        font-size: 16px;
    }
</style>
@endpush

@section('contents')
<div id="vue-element" v-cloak>
    <div style="font-weight: bold;">Alert</div>
    <h2>Container</h2>

    <div class="wrapper-sample">
        <lme-alert v-model="alert1"
                   type="warning"
                   title="警告"
                   message="詳細テキストを記載"
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert2"
                   type="error"
                   title="エラー"
                   message="詳細テキストを記載詳細テキストを記載詳細テキストを記載"
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert3"
                   type="success"
                   title="成功"
                   message="詳細テキストを記載"
                   button-detail
                   @click-detail=handelBtnDetail()
       />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert4"
                   type="info"
                   title="インフォメーション"
                   message="詳細テキストを記載"
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <hr style="margin-top: 20px">

    <h2>1 Line</h2>
    <div class="wrapper-sample">
        <lme-alert v-model="alert5"
                   message="警告"
                   type="warning"
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert6"
                   message="失敗、エラー"
                   type="error"
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert7"
                   message="成功"
                   type="success"
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert8"
                   message="インフォメーション"
                   type="info"
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <hr style="margin-top: 20px">

    <h2>Banner</h2>
    <div class="wrapper-sample">
        <lme-alert v-model="alert9"
                   message="警告"
                   type="warning"
                   banner
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert10"
                   message="失敗、エラー"
                   type="error"
                   banner
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert11"
                   message="成功"
                   type="success"
                   banner
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <div class="wrapper-sample">
        <lme-alert v-model="alert12"
                   message="インフォメーション"
                   type="info"
                   banner
                   button-detail
                   @click-detail="handelBtnDetail()"
        />
    </div>
    <br><br><br>

    <hr style="margin-top: 20px">
    <h2 class="title-toast">
        トースト
    </h2>
    <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>

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