@extends('layouts.backend.app')

@section('title','Media Query Settings')

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-settings icon-gradient bg-mean-fruit">
                    </i>
                </div>
                <div>Media Query Settings</div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            @include('backend.settings.sidebar')
        </div>
        <!-- left column -->
        <div class="col-md-9">
            {{-- how to use callout --}}
            <div class="main-card mb-3 card">
                <div class="card-body">
                    <h5 class="card-title">How To Use:</h5>
                    <p>You can get the value of each setting anywhere on your site by calling <code>setting('media-query')</code></p>
                </div>
            </div>

            <div class="main-card mb-3 card">
                <div class="card-body">
                    @if(Route::is('app.media-queries.summaries.*'))
                        <x-declaration-summary :queries="$queries"></x-declaration-summary>
                    @elseif(Route::is('app.media-queries.selectors.*'))
                        <x-element-selector-management></x-element-selector-management>
                    @else
                        <x-media-query-builder :media-query="$query ?? null"></x-media-query-builder>
                    @endif
                </div>
            </div>
                <!-- /.card -->
        </div>
    </div>

@endsection