@extends('web.layouts.app')

@push('styles')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link href="{{ asset('build/assets/main.css') . '?v=' . env('APP_VERSION') }}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{ asset('web/assets/css/emojionearea.min.css') }}">
    <style>
        .emojionearea .emojionearea-editor {
            background: #e5e5e5;
            border: 1px solid #e5e5e5;
            border-radius: 10px;
            margin-top: 30px;
            margin-left: 15px;
            min-height: 60px;
        }
    </style>
    @if (env('APP_PROJECT') == 'Mora')
        <style>
            .main-content .container-fluid, .main-content .main-chat-container {
                height: 100%;
                margin-top: 10px;
            }
        </style>
    @endif
@endpush

@section('content')
    <div class="row w-100 border-top m-0 main-chat-container overflow-y-auto">
        <div class="card">
            <div class="card-header mt-2 mb-1" style="display: flex;justify-content: space-between;">
                <h4 class="card-title">
                    <a class="text-dark me-2" style="margin-bottom: 15px;font-size: larger;" href="{{  route('web.flows.index') }}">
                        <i class="fas fa-arrow-left"></i>
                    </a>
                    @lang('user.design_flow')
                </h4>
            </div>
            <div id="app"></div>
            
        </div>
    </div>
@endsection

@push('scripts')
    <script type="module" src="{{ asset('build/assets/main.js') . '?v=' . env('APP_VERSION') }}"></script>
    <script type="text/javascript" src="{{ asset('web/assets/js/emojionearea.min.js') }}"></script>
@endpush