| <div class="w-100">
    {% for key, accordion in content %}
        <div class="card mb-3">
            <div class="card-header p-2">
                <div class="input-group input-group-sm">
                    <input type="text" name="{{ name }}[title][]" class="form-control" placeholder="{{ phrase('Title') }}" value="{{ accordion.title }}" id="{{ name }}_input" spellcheck="false" />
                    <a href="javascript:void(0)" class="btn btn-secondary --move-up" data-element=".card" data-bs-toggle="tooltip" title="{{ phrase('Move Up') }}">
                        <i class="mdi mdi-arrow-collapse-up"></i>
                    </a>
                    <a href="javascript:void(0)" class="btn btn-secondary --move-down" data-element=".card" data-bs-toggle="tooltip" title="{{ phrase('Move Down') }}">
                        <i class="mdi mdi-arrow-collapse-down"></i>
                    </a>
                    <a href="javascript:void(0)" class="btn btn-secondary" role="remove-accordion" data-element=".card">
                        <i class="mdi mdi-delete" data-bs-toggle="tooltip" title="{{ phrase('Remove') }}"></i>
                    </a>
                </div>
            </div>
            <div class="card-body p-2">
                <textarea name="{{ name }}[body][]" class="form-control" role="wysiwyg" placeholder="{{ phrase('Body of item') }}" id="{{ name }}_input" rows="1" spellcheck="false" {{ readonly }}>{{ accordion.body }}</textarea>
            </div>
        </div>
    {% endfor %}
</div>
<div class="d-grid w-100">
    <a href="javascript:void(0)" class="btn btn-light" role="add-accordion" data-field="{{ name }}" style="border:2px dashed #ddd">
        <i class="mdi mdi-plus-circle-outline"></i>
        {{ phrase('Add') }}
    </a>
</div>
 |