<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">

<div class="panel panel-default">
    <h2 class="panel-heading" role="tab">
        <div class="panel-heading-row">
            <button
                class="panel-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-parent="#accordion"
                data-bs-target="#collapseFour"
                aria-controls="collapseFour"
                aria-expanded="false"
                id="headingFour"
            >
                <div class="panel-title">
                    <strong>Image handling settings</strong>
                </div>
                <span class="caret"></span>
            </button>
        </div>
    </h2>
    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
            <p>
                Configure the image processing tool used by TYPO3.
            </p>
            <p>
                TYPO3 uses <strong>GraphicsMagick</strong> or <strong>ImageMagick</strong> for advanced
                image processing. The correct configuration depends on the version available on your system.
                Available image processing tools are detected automatically and appropriate settings are
                recommended.<br>
                When configured correctly, image processing tests in the
                <strong>Install Tool → Test Setup</strong> section should pass.
            </p>
            <p>
                If the <strong>ImageMagick</strong> or <strong>GraphicsMagick</strong> executables
                are installed in a non-standard location, specify the absolute path to the directory here.
            </p>
            <div class="row mb-3">
                <div class="col-sm-12">
                    <div class="input-group">
                        <input
                                type="text"
                                name="install[values][{feature.name}][additionalSearchPath]"
                                value="{feature.additionalSearchPath}"
                                class="form-control t3js-presets-image-executable"
                                {f:if(condition: '!{isWritable}', then: 'disabled')}
                        />
                        <button
                            class="btn btn-default t3js-presets-image-executable-trigger"
                            type="button"
                            {f:if(condition: '!{isWritable}', then: 'disabled')}
                        >
                            Find executables in this directory
                        </button>
                    </div>
                </div>
            </div>

            <f:for each="{feature.presetsOrderedByPriority}" as="preset">
                <f:render partial="Settings/Presets/{feature.name}/{preset.name}" arguments="{_all}" />
            </f:for>
        </div>
    </div>
</div>

</html>
