@extends('component-base.layout')

@section('title')
    Hyperlink
@endsection

@push('css')
    <link rel="stylesheet" href="/css/component-base/hyperlink/hyperlink.css?v={{config("sns-line.version")}}">
    <style>
        .demo-section {
            padding: 24px;
            background: white;
            border-radius: 10px;
        }
        .demo-section + .demo-section {
            margin-top: 20px;
        }
        .demo-label {
            font-weight: 700;
            font-size: 16px;
            color: #1F1F1F;
            margin-bottom: 16px;
        }
        .demo-row {
            display: flex;
            align-items: center;
            gap: 32px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }
        .demo-desc {
            font-size: 13px;
            color: #9A9EAD;
            margin-top: 8px;
        }
    </style>
@endpush

@section('contents')
    <div id="vue-element" v-cloak>

        {{-- Case 1: underline --}}
        <div class="demo-section">
            <div class="demo-label">Underline (下線あり)</div>
            <div class="demo-row">
                <lme-hyperlink href="#" :underline="true">青色リンク</lme-hyperlink>
            </div>
        </div>

        {{-- Case 2: no-underline --}}
        <div class="demo-section">
            <div class="demo-label">No Underline (下線なし)</div>
            <div class="demo-row">
                <lme-hyperlink href="#" :underline="false">青色リンク</lme-hyperlink>
            </div>
        </div>

        {{-- Disabled --}}
        <div class="demo-section">
            <div class="demo-label">Disabled (無効)</div>
            <div class="demo-row">
                <lme-hyperlink href="#" :underline="true" :disabled="true">下線あり（無効）</lme-hyperlink>
                <lme-hyperlink href="#" :underline="false" :disabled="true">下線なし（無効）</lme-hyperlink>
            </div>
        </div>

        {{-- Open in new tab --}}
        <div class="demo-section">
            <div class="demo-label">External Link (外部リンク)</div>
            <div class="demo-row">
                <lme-hyperlink href="#" :underline="true" target="_blank">
                    青色リンク
                </lme-hyperlink>
                <lme-hyperlink href="#" :underline="false" target="_blank">
                    新しいタブで開く
                </lme-hyperlink>
            </div>
        </div>

    </div>
@endsection

@push('js')
    <script src="/js/component-base/hyperlink/lme-hyperlink.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/component-base/hyperlink/hyperlink.js?v={{config("sns-line.version")}}"></script>
@endpush