{namespace modules = CodingMs\Modules\ViewHelpers}
{namespace core = TYPO3\CMS\Core\ViewHelpers}
<f:if condition="{f:count(subject: data)}">
	<f:then>

		<div class="panel panel-default table-wrapper-modules">
			<div class="panel-heading">
				<div class="row">
					<div class="col-md-8">
						<f:variable name="headerTranslation"><f:translate key="tx_modules_label.list_{list.underscoredId}_header" /></f:variable>
						<f:if condition="{headerTranslation}">
							<f:then>
								<h4 class="mt-2 mb-0">{headerTranslation} ({list.countAll})</h4>
							</f:then>
							<f:else>
								<h4 class="mt-2 mb-0">tx_modules_label.list_{list.underscoredId}_header ({list.countAll})</h4>
							</f:else>
						</f:if>
					</div>
					<div class="col-md-4 table-actions">

						<f:if condition="{list.columnSelector}">

							<div class="dropdown d-inline-block pull-right float-end ms-1">
								<button class="btn btn-default dropdown-toggle"
										style="padding: 5px 8px;"
										type="button"
										data-bs-toggle="dropdown"
										data-bs-auto-close="false"
										aria-expanded="false">
									<f:translate key="tx_modules_label.columns" extensionName="modules" />
								</button>
								<div class="dropdown-menu dropdown-menu-end">
									<f:form class="table-columns-form pull-left"
											action="{list.action}"
											controller="{list.controller}"
											pageUid="{list.pid}"
											arguments="{list.additionalParams}">

										<div class="dropdown-button-wrapper">
											<f:form.submit value="{f:translate(key: 'tx_modules_label.ok', extensionName: 'modules')}"
														   class="btn btn-success w-100 dropdown-button" />
										</div>
										<div class="dropdown-list">

											<f:for each="{list.fields}" key="field" as="options">
												<div class="dropdown-item">
													<div class="form-check">
														<f:form.checkbox class="form-check-input"
																		 value="{field}"
																		 id="{options.underscoredId}"
																		 checked="{options.visible}"
																		 name="visible[]" />
														<label class="form-check-label" for="{options.underscoredId}">
															<f:translate key="tx_modules_label.list_{list.underscoredId}_col_{options.underscoredId}" />
														</label>
													</div>
												</div>
											</f:for>
										</div>


									</f:form>
								</div>
							</div>
						</f:if>

						<div class="btn-group btn-group pull-right float-end" role="group" aria-label="Pagination">
							<modules:variable.set name="list.nextOffset" value="{modules:math.sum(a: list.offset, b: list.limit)}" />
							<modules:variable.set name="list.previousOffset" value="{modules:math.subtract(a: list.offset, b: list.limit)}" />
							<modules:variable.set name="list.pagesModulo" value="{modules:math.modulo(a: list.countAll, b: list.limit)}" />
							<modules:variable.set name="list.lastOffset" value="{modules:math.subtract(a: list.countAll, b: list.pagesModulo)}" />
							<f:if condition="{list.offset}>0">
								<f:then>
									<f:link.action action="{list.action}" arguments="{offset: 0}" title="First" class="btn btn-default"><core:icon identifier="actions-view-paging-first"/></f:link.action>
									<f:link.action action="{list.action}" arguments="{offset: list.previousOffset}" title="Previous" class="btn btn-default"><core:icon identifier="actions-view-paging-previous"/></f:link.action>
								</f:then>
								<f:else>
									<span title="First" class="btn btn-default disabled"><core:icon identifier="actions-view-paging-first-disabled"/></span>
									<span title="Previous" class="btn btn-default disabled"><core:icon identifier="actions-view-paging-previous-disabled"/></span>
								</f:else>
							</f:if>
							<f:if condition="{list.nextOffset} >= {list.countAll}">
								<f:then>
									<span title="Next" class="btn btn-default disabled"><core:icon identifier="actions-view-paging-next-disabled"/></span>
									<span title="Last" class="btn btn-default disabled"><core:icon identifier="actions-view-paging-last-disabled"/></span>
								</f:then>
								<f:else>
									<f:link.action action="{list.action}" arguments="{offset: list.nextOffset}" title="Next" class="btn btn-default"><core:icon identifier="actions-view-paging-next"/></f:link.action>
									<f:link.action action="{list.action}" arguments="{offset: list.lastOffset}" title="Last" class="btn btn-default"><core:icon identifier="actions-view-paging-last"/></f:link.action>
								</f:else>
							</f:if>
						</div>

					</div>
				</div>
			</div>
			<div class="panel-body">
				<table class="table table-modules table-striped table-hover">
					<f:render partial="Table/Header" arguments="{list: list}" />
					<tbody>
					<f:for each="{data}" as="listItem" iteration="listItemIterator">
						<tr class="{listItem.beTableClass} {f:if(condition: listItem.hidden, then: 'opacity-50')} {f:if(condition: listItemIterator.isFirst, then: 'firstcol')} {f:if(condition: listItemIterator.isLast, then: 'lastcol')}">
							<f:for each="{list.fields}" key="field" as="options">
								<f:if condition="({options.hideInList} == 0) && {options.visible}">
									<modules:variable.set name="fieldUnprocessed" value="1" />

									<!-- Check field for default cell -->
									<f:if condition="{options.format}=='Plain'">
										<modules:variable.set name="fieldUnprocessed" value="0" />
										<td>
											<f:if condition="{options.crop}">
												<f:then>
													<f:format.crop maxCharacters="{options.crop}" append="..."><f:format.stripTags>{modules:variable.get(name: 'listItem.{field}')}</f:format.stripTags></f:format.crop>
												</f:then>
												<f:else><f:format.stripTags>{modules:variable.get(name: 'listItem.{field}')}</f:format.stripTags></f:else>
											</f:if>
										</td>
									</f:if>
									<f:if condition="{options.format}=='PlainEditable'">
										<modules:variable.set name="fieldUnprocessed" value="0" />
										<td>
											<modules:be.editInPopupLink table="{list.table}" uid="{listItem.uid}]"
																		title="{f:translate(key: 'tx_modules_label.edit_value', extensionName: 'modules')}" class="btn btn-default btn-popup"
																		columnsOnly="{modules:format.replace(content: options.underscoredId, substring: '_translated')}">
												<core:icon identifier="actions-document-open"/></modules:be.editInPopupLink><f:if condition="{options.crop}">
											<f:then>
												<f:format.crop maxCharacters="{options.crop}" append="...">{modules:variable.get(name: 'listItem.{field}')}</f:format.crop>
											</f:then>
											<f:else>{modules:variable.get(name: 'listItem.{field}')}</f:else>
										</f:if>
										</td>
									</f:if>
									<f:if condition="{options.format}=='DateTime'">
										<modules:variable.set name="fieldUnprocessed" value="0" />
										<td><f:format.date format="{options.dateFormat}">{modules:variable.get(name: 'listItem.{field}')}</f:format.date></td>
									</f:if>
									<f:if condition="{options.format}=='Email'">
										<modules:variable.set name="fieldUnprocessed" value="0" />
										<td><f:link.email email="{listItem.email}">{listItem.email}</f:link.email></td>
									</f:if>
									<f:if condition="{options.format}=='Color'">
										<modules:variable.set name="fieldUnprocessed" value="0" />
										<td>
											<div class="color-box" style="background-color: {modules:variable.get(name: 'listItem.{field}')};width: 16px; height: 16px; display: inline-block; border: 1px solid #000" title="{modules:variable.get(name: 'listItem.{field}')}"></div>
											<span>{modules:variable.get(name: 'listItem.{field}')}</span>
										</td>
									</f:if>
									<f:if condition="{options.format}=='Image'">
										<modules:variable.set name="fieldUnprocessed" value="0" />
										<td style="width:50px;">
											<f:if condition="{modules:variable.get(name: 'listItem.{field}.uid')}">
												<f:then>
													<f:image src="{modules:variable.get(name: 'listItem.{field}.uid')}"
															 maxHeight="50"
															 treatIdAsReference="1"
															 style="border: 1px solid #ccc" />
												</f:then>
												<f:else>
													<div style="width: 50px; height:50px; border: 1px solid #ccc; text-align: center; line-height: 48px">-/-</div>
												</f:else>
											</f:if>
										</td>
									</f:if>
									<f:if condition="{options.format}=='Boolean'">
										<modules:variable.set name="fieldUnprocessed" value="0" />
										<td>
											<f:if condition="{modules:variable.get(name: 'listItem.{field}')}">
												<f:then><f:translate key="tx_modules_label.boolean_true" extensionName="modules" /></f:then>
												<f:else><f:translate key="tx_modules_label.boolean_false" extensionName="modules" /></f:else>
											</f:if>
										</td>
									</f:if>

									<!-- Process field with special cell -->
									<f:if condition="{fieldUnprocessed}">
										<f:render partial="Table/Cell/{options.format}" arguments="{listItem: listItem, list: list, field: field, options: options}" />
									</f:if>
								</f:if>
							</f:for>
							<td nowrap="nowrap">
								<!-- Process row actions -->
								<f:if condition="{f:count(subject: {list.actions})}">
									<div class="btn-group btn-group" role="group" aria-label="Actions">
										<f:for each="{list.actions}" key="action" as="options">
											<f:render partial="Table/Action/{options.action}" arguments="{listItem: listItem, list: list, action: action, options: options}" />
										</f:for>
									</div>
								</f:if>
							</td>
						</tr>
					</f:for>
					</tbody>
				</table>
			</div>
		</div>

	</f:then>
	<f:else>
		<f:be.infobox title="{f:translate(key: 'tx_modules_label.list_{list.underscoredId}_no_entries')}" state="-1" />
	</f:else>
</f:if>