@section('page_title')
<div class="row page-titles mx-0">
    <div class="col-sm-6 p-md-0">
        <div class="welcome-text">
            <h4>{{ $page_title }} - {{ $widget->name }}</h4>
        </div>
    </div>
    <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0)">Widgets</a></li>
            <li class="breadcrumb-item active"><a href="javascript:void(0)">Builder</a></li>
        </ol>
    </div>
</div>
@stop

@section('page_content')

    <div class="row">
        @include('tenant.metro.lemarex.channels.widget.inc._widget_selectors')
        <div class="col-8">
            <form id="frmBuildWidget" method="post" action="{{ route('tenant.lemarex.channels.widget.build', $widget->id) }}">
    
                @csrf
                
                <div class="card-wrapper">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Widget Form</h4>
                        </div>
                        <div class="card-body">
                            <div id="web-form" data-id="web-form" class="droppable minH-200">
                                
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Widget Settings</h4>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped verticle-middle table-responsive-sm sorted_table">
                                    <thead>
                                        <tr>
                                            <th width="50">&nbsp;</th>
                                            <th>Label</th>
                                            <th>Url</th>
                                            <th>Text Color</th>
                                            <th>Background Color</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="widget_options_wrapper" data-type="settings">
                                        @include('tenant.metro.lemarex.channels.widget.inc._widget_options')
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="row">
                                <div class="col-6">
                                    <a href="{{ route('tenant.lemarex.channels.widget.index') }}" class="btn btn-danger btn-block">Cancel</a>
                                </div>
                                <div class="col-6">
                                    <button type="submit" class="btn btn-primary btn-block">Build Widget</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

@stop

@section('page_modal')
    @include('lms.channels.widgetbuilder.inc._widget_modals')
@stop