@extends('component-base.layout')

@section('title')
    Button
@endsection

@push('css')
    <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;
            width: fit-content;
        }

        #vue-element .lme-flex {
            align-items: center;
        }

        #vue-element hr {
            margin: 50px 0;
        }

        #vue-element h1 {
            font-weight: 700;
            font-size: 48px;
            color: #1F1F1F;
            margin: 0 0 0 20px;
        }

        h5 {
            margin: 15px 0;
        }

        /* wrap-sample: label + buttons layout */
        .wrap-sample {
            margin: 20px 20px 0 20px;
            gap: 20px;
            width: 1440px;
        }

        .wrap-sample:not(.wrap-icon) {
            display: flex;
            align-items: center;
        }

        /* Label area (Size + State) */
        .sample-label {
            display: flex;
            align-items: center;
            width: 250px;
            flex-shrink: 0;
        }

        .sample-label .label-size {
            width: 150px;
            color: #878A92;
            font-weight: 700;
            font-size: 24px;
        }

        .sample-label .label-state {
            width: 100px;
            color: #878A92;
            font-weight: 400;
            font-size: 16px;
        }

        /* Buttons area: responsive grid */
        .sample-buttons {
            flex: 1;
            min-width: 0;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }

        .sample-buttons .lme-flex-col-table {
            display: flex;
            gap: 10px;
        }

        .sample-buttons .lme-flex-col-table > * {
            flex: 1;
        }

        /* Title row */
        #vue-element .col-title {
            margin: 0 0 0 20px;
        }

        #vue-element .col-title h5 {
            font-weight: 700;
            font-size: 24px;
            color: #878A92;
        }

        #vue-element .icon-title {
            font-weight: 400;
            font-size: 14px;
            color: #878A92;
        }

        .sample-buttons .lme-flex-col-table .icon-title > * {
            margin-top: 10px;
            flex: 1;
        }

        /* Icon sections */
        #vue-element .wrap-icon {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
        }

        #vue-element .wrap-icon > .lme-flex {
            gap: 50px;
            flex-wrap: wrap;
        }

        #vue-element .wrap-icon .lme-flex .lme-flex {
            gap: 20px;
        }

        #vue-element .wrap-icon .lme-flex .lme-flex > div {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Button Icon sample */
        .btn-icon-row {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 24px;
            padding: 16px 0;
            margin-left: 20px;
        }
        .btn-icon-row:last-child {
            border-bottom: none;
        }
        .btn-icon-previews {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 180px;
            flex-shrink: 0;
        }
        .btn-icon-previews div:first-child {
            width: 135px;
            display: flex;
            justify-content: center;
        }
        .btn-icon-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .btn-icon-name {
            font-weight: 700;
            font-size: 14px;
            color: #1F1F1F;
        }
        .btn-icon-desc {
            font-size: 14px;
            color: #1F1F1F;
        }

    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>
        <h1 style="font-weight: bold;">Button</h1>
        <br>
        <br>
        <br>
        @include('component-base.button.button-flat-sample')
        <hr>
        @include('component-base.button.button-default-sample')
        <hr>
        @include('component-base.button.button-lgram-sample')
        <hr>
        @include('component-base.button.button-risk-sample')
        <hr>
        @include('component-base.button.button-ghost-sample')

        <hr>
        @include('component-base.button.button-icon-sample')
        <br>
        <br>
        <br>
        <br>
    </div>
@endsection

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