@@include('../_includes/html-head.html', {"title": "Vvveb - Fields","scripts":"","base_href":"../"})

<body class="field">

<div id="container">
       
    @@include('../_includes/sidebar.html')

    <div class="main">

	@@include('../_includes/top-header.html')
	
        <div id="content">
            <div class="actions">
				
				<div class="title">
					<h4 class="text-muted my-2">
						<i class="icon-document-text-outline"></i>
						<span>Fields</span>
					</h4>
				</div>
				
				<div class="btns">
					<button type="button" data-bs-toggle="collapse" href="#filters" aria-expanded="false"
							aria-controls="filters" title="Filter"
							class="btn btn-icon btn-outline-secondary">
						<i class="icon-funnel-outline"></i>&nbsp;
						<i class="icon-chevron-down-outline small"></i>
					</button>

					 <a href data-v-url-params='{"module":"localization/field"}' 
							class="btn btn-primary btn-icon ms-1">
						<i class="icon-add-outline"></i> <span>Add field</span>
					</a>
				</div>
            </div>

            <div id="filters" class="collapse mx-3">
				<form method="get">
				 
				 <input type="hidden" class="form-control" name="module" value="">
				 <input type="hidden" class="form-control" name="action" value="">
				 <input type="hidden" class="form-control" name="type" value="">
				 
                <div class="card card-block p-3">

						<div class="row">
                            <div class="col-sm-3">
								<div class="row">
									<label class="col-sm-2 col-form-label" for="search">Search</label>
									<div class="col-sm-10">
										<input type="search" class="form-control" name="filter[search]" value="" placeholder="Search" id="search">
									</div>
								</div>
                            </div>
							<div class="col-sm-4 mb-3">
								<div class="row">
                                <label class="col-sm-2 col-form-label" for="input-model">Country</label>
									<div class="col-sm-10">
									  <input name="filter[country_id]" value="" placeholder="Country" id="input-country" autocomplete="off" type="text" class="form-control autocomplete"
				data-url="/admin?module=localization/countries&action=countryAutocomplete" data-text=""/>
									</div>
								</div>
                            </div>
							
							<div class="col-sm-3">
								<div class="row">
                                <label class="col-sm-2 col-form-label" for="input-model">Status</label>
									<div class="col-sm-10">
									  <select name="filter[status]" id="filter-by-status" class="form-control" >
										<option value="">- All -</option>
										<option value="1" data-v-option>Active</option>
										<option value="0" data-v-option>Inactive</option>
									  </select>
									</div>
								</div>
                            </div>

							<div class="col-sm-2">
								<button type="submit" id="button-filter" class="btn btn-primary btn-icon">
									<i class="icon-funnel-outline"></i> Filter
								</button>
							</div>
                    </div>

                </div>
				</form>
            </div>

            <div id="main-content">
                @@include('../_includes/notifications.html')

                <div class="field card-block">
                    <form action="" method="post">
						
						<div class="bulk-actions px-2 mb-2" style="display:none">
						   <button type="submit" name="action" value="delete" aria-expanded="false" 
									title="Delete selected"
									class="btn btn-icon btn-outline-secondary bg-body-tertiary text-danger">
								<i class="icon-trash-outline"></i> Delete selected
							</button>
						</div>
						
                        <div class="table-responsive">
                        <table class="table table-hover middle-align" data-v-field>

                            <thead>
                            <tr>
                                <th class="col-cb">
                                    <div class="checkbox_outer">

                                        <label class="form-check">
                                            <input type="checkbox" class="form-check-input" value="4"
                                                   name="field[]"
                                                   data-v-vvveb-action="table.bulkSelect">
                                            <span class="form-check-label"></span>
                                            <span class="custom-control-description">&nbsp;</span>
                                        </label>


                                    </div>
                                </th>
                                <th class="field">
									<i class="icon-cube-outline"></i><span>Name</span>
								</th>
								<th style="width:200px;text-align:center;">
									<i class="la la-image"></i><span>Country</span>
								</th>
								
								<th style="width:200px;text-align:center;">
									<i class="la la-image"></i><span>Status</span>
								</th>		

                                <th class="actions text-center" style="width:150px">
									<i class="la la-edit"></i><span>Actions</span>
								</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="field" data-v-field>
                                <td class="checkbox">
                                    <label class="form-check">
                                        <input type="checkbox" class="form-check-input" value="4" name="field_id[]" data-v-vvveb-action="table.selectRow" data-v-field-field_id>
                                        <span class="form-check-label"></span>
                                        <span class="custom-control-description">&nbsp;</span>
                                    </label>

                                </td>
							
                                <td class="field position-relative">
                                    <a href="/admin?module=field&amp;action=field&amp;id=4" data-v-field-url><span data-v-field-name>Field</span></a>
                                </td>

								<td style="width:200px;text-align:center;">
									<span data-v-field-country></span>
                                </td>

								<td style="width:200px;text-align:center;">
									<span class="price badge small bg-success" data-v-if="field.status = 1"><span>Active</span></span>
									<span class="price badge small bg-body-tertiary text-muted" data-v-if="field.status = 0"><span>Disabled</span></span>
                                </td>

                                <td class="actions" style="width:200px;">

									<div class="btn-group">
										<a class="btn btn-icon btn-outline-secondary" data-v-field-edit-url><i class="la la-pencil-alt text-primary"></i><span>Edit</span></a>
										<button type="button" class="btn btn-icon btn-outline-secondary dropdown-toggle dropdown-toggle-split" 
											
											data-bs-toggle="dropdown" 
											aria-expanded="false" 
											data-bs-reference="parent">
											
										  <span class="visually-hidden">Toggle primary</span>
										</button>
										<ul class="dropdown-menu">

										  <li><a class="dropdown-item text-danger" data-v-field-delete-url onclick="return confirm('Are you sure?')"><i class="icon-trash-outline"></i><span>Delete</span></a></li>
										</ul>
									 </div>

                                </td>
                            </tr>
							<tr data-v-if-not="this.count > 0" class="no-items">
								<td colspan="100">
									<div class="text-center mb-4">
										<div>
											<i class="la la-file-alt display-4 lh-1 text-secondary text-opacity-75"></i>
											<div class="mt-3">No field to display!</div>
										</div>

										<a href data-v-url-params='{"module":"fields/field"}' 
												class="btn btn-outline-secondary btn-icon mt-4">
											<i class="icon-add-outline"></i> <span>Add field</span>
										</a>
									</div>
								</td>
							</tr>
                            </tbody>
                        </table>
                        </div>

						<div class="bottom clearfix">
							<div class="float-start"></div>
							<div class="float-end">
								@@include('../_includes/pagination.html')
							</div>
		                </div>

                    </form>
                </div>
            </div>
        </div>
		@@include('../_includes/main-footer.html')
    </div>
</div>

@@include('../_includes/footer-scripts.html')

<script src="libs/autocomplete/autocomplete.js"></script>

<script>
document.querySelectorAll('input.autocomplete').forEach(el => new _AutocompleteInput(el, el.dataset));
document.querySelectorAll('input.autocomplete-list').forEach(el => new _AutocompleteList(el, el.dataset));
</script>

@@include('../_includes/footer.html')
