@extends('layouts.backend')

@section('content')

    <!-- Hero -->
    <div class="bg-image" style="background-image: url('./media/photos/photo13@2x.jpg');">
        <div class="bg-black-50">
            <div class="content content-full">
                <div class="d-flex justify-content-between align-items-center">
                    <h1 class="flex-fill font-size-h2 text-white my-2">
                        <i class="fa fa-boxes text-white-50 mr-1"></i> {{ __('Devices') }}
                    </h1>
                </div>
            </div>
        </div>
    </div>
    <!-- END Hero -->

    <!-- Page Content -->
    <div class="content">
        <form action="be_pages_projects_dashboard.html" method="POST" onsubmit="return false;">
            <div class="form-group row items-push mb-0">
                {{--
                <div class="col-sm-6 col-xl-3">
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-white">
                                <i class="fa fa-search"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control border-left-0" id="dm-projects-search" name="dm-projects-search" placeholder="{{ __('Search Device..') }}">
                    </div>
                </div>
                --}}
                <div class="col-sm-6 col-xl-4 offset-xl-8">
                    <select data-url="{{ route('DashboardFilter') }}" class="js-select2 form-control" id="dashboardDeviceFilter" style="width: 100%;" data-placeholder='{{ __("Choose many..") }}' multiple>
                        <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                        @foreach($filter as $f)
                            <option value="{{ $f }}" selected>{{ $f }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>

        <div class="row row-deck devicesWidget">
            @include('dashboard.widget')
        </div>
        <!-- END Overview -->
    </div>
    <!-- END Page Content -->

@endsection