{namespace core=TYPO3\CMS\Core\ViewHelpers}
<f:layout name="BackendLayout" />

<f:section name="Content">
<f:render partial="Flashmessages.html" arguments="{_all}" />
<div id="list">
   <div class="d-flex align-items-center m-3">
      <h4 class="m-0 fw-bold"><f:translate key="{LLL.be}list.header" /></h4>
      <f:link.action action="add" class="add_action_link_top ms-auto fw-bold"><i class="bi bi-plus-lg"></i> <f:translate key="{LLL.be}list.add" /></f:link.action>
   </div>
<f:if condition="{bookingtimepageurls}">
   <f:then>
      <div class="box border border-3 rounded-3 m-3">
         <f:for each="{bookingtimepageurls}" as="bookingtimepageurl" iteration="i">
            <div class="border-bottom p-3 d-flex align-items-center justify-content-between">
               <div>
                  <strong>{bookingtimepageurl.title}</strong>
                  <br />
                  <small>{bookingtimepageurl.url}</small>
               </div>
               <div>
                  <div class="d-flex">
                     <f:link.action action="preview" class="btn btn-secondary d-inline-flex align-items-center me-2" arguments="{bookingtimepageurl:bookingtimepageurl}"><i class="bi bi-eye-fill me-2"></i> <f:translate key="{LLL.be}list.actions.preview" /></f:link.action>
                     <f:link.action action="edit" class="btn btn-primary d-inline-flex align-items-center" arguments="{bookingtimepageurl:bookingtimepageurl}"><i class="bi bi-pencil-fill me-2"></i> <f:translate key="{LLL.be}list.actions.edit" /></f:link.action>
                  </div>
               </div>
            </div>
         </f:for>
      </div>
   </f:then>
   <f:else>
      <div class="box border border-3 rounded-3 m-3 text-center p-3">
         <h4 class="m-3 fw-bold"><f:translate key="{LLL.be}list.add_first.header" /></h4>
         <p class="m-3"><f:translate key="{LLL.be}list.add_first.text" /></p>
         <f:link.action action="add" class="m-3 add_action_link ms-auto fw-bold btn btn-primary"><i class="bi bi-plus-lg"></i> <f:translate key="{LLL.be}list.add_first.button" /></f:link.action>
      </div>
   </f:else>
</f:if>
</div>
</f:section>