@section('title', __('site.page_hotsite_title'))
@section('head')
    <style>
        .window-box {
            position: relative;
            border: 2px solid hsl(0, 0%, 90%);
            border-radius: 5px;
            background-color: white;
        }

        .top-bar {
            border: 1px solid transparent;
            width: 99,5%;
            height: 40px;
            background-color: hsl(0, 0%, 90%);
        }

        .buttons {
            margin-top: 8px;
            margin-left: 10px;
            display: inline-block;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .upperButtons {
            border-radius: 50%;
            height: 12px;
            width: 12px;
            display: inline-block;
        }

        .url {
            position: absolute;
            border-color: hsl(0, 0%, 90%);
            top: 5px;
            height: 31px;
            left: 25%;
            width: 50%;
            padding: 3px 5px 5px 5px;
            border-radius: 5px;
            background-color: white;
        }

        .url:hover{
            cursor: text;
        }
    </style>
@endsection
@include('includes/header')
@include('includes/topSite')
<div class="content">

    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center py-2">
                <div class="flex-grow-1">
                    <h1 class="h3 fw-bold mb-2">
                        {{ __('site.page_hotsite_h1') }}
                    </h1>
                </div>
                <nav class="flex-shrink-0 mt-3 mt-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb breadcrumb-alt push mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('site.home.r') }}">{{ __('general.top_menu_item_site') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="javascript:void(0)">{{ __('site.menu_item_2') }}</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('site.menu_item_2_sub_3') }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-5">
            <div class="block block-rounded">
                <div class="block-header block-header-default">
                    <h3 class="block-title hupper">
                        {!! __('site.page_hotsite_bhead') !!}
                    </h3>
                </div>
                <div class="block-content p-0">
                    <div class="ps-3 pe-3 pt-3 mb-0">
                    <p>{{ __('site.page_hotsite_about') }}</p>
                    <h6 class="mb-1">{{ __('site.page_hotsite_diff_title') }}</h6>
                    <p class="mb-0">{{ __('site.page_hotsite_diff_about') }}</p>
                    </div>
                    <hr class="mb-0 mt-2">
                    <div class="ps-3 pe-3 pb-2 pt-2">

                        <div class="mb-3 h-width">
                            <label class="form-label">{{ __('site.page_hotsite_url_label') }}</label>
                            <input type="text" class="form-control" name="url" value="https://{{ $siteData->domain }}/hotsite/" readonly="readonly">
                        </div>

                        <div class="mb-3 h-width">
                            <label class="form-label">{{ __('site.page_hotsite_embed_label') }}</label>
                            <textarea class="form-control" rows="3" readonly="readonly">https://{{ $siteData->domain }}/hotsite/</textarea>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-7">

            <div class="window-box">
                <div class="top-bar">
                    <div class="buttons">
                        <div class="upperButtons" id="close" style="background-color: #ED594A;"></div>
                        <div class="upperButtons" id="min" style="background-color: #FDD800;;"></div>
                        <div class="upperButtons" id="expand" style="background-color: #5AC05A;"></div>
                    </div>
                    <div class="b-InputBox"><span class="url">https://{{ $siteData->domain }}/hotsite/</span></div>
                </div>

                <iframe src="https://{{ $siteData->domain }}/hotsite/" width="100%" frameborder="no" scrolling="no" height="500" class="mb-0"></iframe>

            </div>

        </div>
    </div>

</div>

</div>

</main>


@include('includes/footer')

</div>
<script src="/assets/js/lib/jquery.min.js"></script>
<script src="/assets/js/main.min.js"></script>
</body>
</html>