@extends('layouts.app')

@section('title', __('Policies'))

@section('content')
<div class="content-wrapper">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0">{{ __('Policies') }}</h4>
        <a href="{{ route('policies.create') }}" class="btn btn-primary">
            <i class="fa fa-plus mr-1"></i> {{ __('New Policy') }}
        </a>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="row mb-3" id="policy-filters">
                <div class="col-md-3">
                    <select class="form-control" id="filter-type">
                        <option value="">{{ __('All types') }}</option>
                        <option value="general">{{ __('General') }}</option>
                        <option value="group">{{ __('Group') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select class="form-control" id="filter-status">
                        <option value="">{{ __('All statuses') }}</option>
                        <option value="active">{{ __('Active') }}</option>
                        <option value="draft">{{ __('Draft') }}</option>
                        <option value="archived">{{ __('Archived') }}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="filter-title" placeholder="{{ __('Search title...') }}">
                </div>
            </div>

            <table class="table table-hover" id="policies-table">
                <thead>
                    <tr>
                        <th style="width: 30px"></th>
                        <th>{{ __('Title') }}</th>
                        <th>{{ __('Type') }}</th>
                        <th>{{ __('Roles') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Source') }}</th>
                        <th class="text-right">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody id="policies-tbody">
                    {{-- rows injected by public/js/policies.js --}}
                </tbody>
            </table>

            <p class="text-muted text-center my-4 d-none" id="policies-empty">
                {{ __('No policies yet.') }}
            </p>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        window.PolicyEditUrlBase = "{{ url('policies') }}";
    </script>
    <script src="{{ asset('js/policies.js') }}"></script>
@endpush