{% import '@ui/tooltip.twig' as tooltip %}

<li>
    <button {{ tooltip.attr(environment.translate('Add <a href="%s" target="_blank">editable field</a> for selected cells to edit cell value on frontend. Enjoy the <a href="%s" target="_blank">practical example</a>.') | format('//supsystic.com/documentation/editable-fields/', '//supsystic.com/blog/growing-your-business-with-data-table-plugin/')) }} data-toolbar="#toolbar-editableField">
			<span class="fa-stack">
              <i class="fa fa-fw fa-square-o fa-stack-2x"></i>
              <i class="fa fa-fw fa-pencil fa-stack-1x"></i>
            </span>
    </button>
    <div id="toolbar-editableField" class="toolbar-content">
        <a href="#" data-method="addEditableField"><i class="fa fa-fw fa-plus"></i></a>
        <a href="#" data-method="removeEditableField"><i class="fa fa-fw fa-trash-o"></i></a>
    </div>
</li>
<li>
    <button {{ tooltip.attr(environment.translate('Add dropdown list for highlighted cell to change cell value on frontend.')) }} data-method="addSelectableField" data-toolbar="#toolbar-selectableField">
            <span class="fa-stack">
              <i class="fa fa-fw fa-square-o fa-stack-2x"></i>
              <i class="fa fa-fw fa-list-ul fa-stack-1x"></i>
            </span>
    </button>
</li>
<li>
    <button {{ tooltip.attr(environment.translate('Add datepicker for selected cells to edit their values on frontend.')) }} data-toolbar="#toolbar-datepickerField">
            <span class="fa-stack">
              <i class="fa fa-fw fa-square-o fa-stack-2x"></i>
              <i class="fa fa-fw fa-calendar fa-stack-1x"></i>
            </span>
    </button>
    <div id="toolbar-datepickerField" class="toolbar-content">
        <a href="#" data-method="addDateField"><i class="fa fa-fw fa-plus"></i></a>
        <a href="#" data-method="removeDateField"><i class="fa fa-fw fa-trash-o"></i></a>
    </div>
</li>
<li>
    <button {{ tooltip.attr(environment.translate("Make the rows collapsible. First collapsible row become the &quot;main&quot; row with control button. Other collapsible rows will be hidden by default - user might show / hide them by pressing on control button of &quot;main&quot; row.")) }} data-toolbar="#toolbar-collapsibleCell">
            <span class="fa-stack">
              <i class="fa fa-fw fa-square-o fa-stack-2x"></i>
              <i class="fa fa-fw fa-compress fa-stack-1x"></i>
            </span>
    </button>
    <div id="toolbar-collapsibleCell" class="toolbar-content">
        <a href="#" data-method="addCollapsibleCell"><i class="fa fa-fw fa-plus"></i></a>
        <a href="#" data-method="removeCollapsibleCell"><i class="fa fa-fw fa-trash-o"></i></a>
    </div>
</li>
<li>
    <button {{ tooltip.attr(environment.translate("Convert the cell content into icon with tooltip.")) }} data-toolbar="#toolbar-tooltipCell">
            <span class="fa-stack">
              <i class="fa fa-fw fa-square-o fa-stack-2x"></i>
              <i class="fa fa-fw fa-info fa-stack-1x"></i>
            </span>
    </button>
    <div id="toolbar-tooltipCell" class="toolbar-content">
        <a href="#" data-method="addTooltipCell"><i class="fa fa-fw fa-plus"></i></a>
        <a href="#" data-method="removeTooltipCell"><i class="fa fa-fw fa-trash-o"></i></a>
    </div>
</li>
