{% if dropzone.peerReview %}
    <div class="panel-group" id="peerReview-helper-accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#show-peerReview-help"
                   href="#show-peerReview-help">
                    <h4 class="panel-title">
                        <span class="fa fa-angle-down"></span>
                        <span class="fa fa-angle-right" style="display: none;"></span>
                        {{ "Help on peerReview mode"|trans({}, 'icap_dropzone') }}
                    </h4>
                </a>
            </div>
            <div id="show-peerReview-help" class="panel-collapse collapse">
                <div class="panel-body">
                    <p> {{ "PeerReview_helper_ideal_case"|trans({},'icap_dropzone')|raw }} </p>

                    <p> {{ "PeerReview_helper_ideal_case_example"|trans({},'icap_dropzone') }}</p>

                    <p> {{ "PeerReview_helper_other_cases"|trans({},'icap_dropzone')|raw }}</p>

                    <p> {{ "PeerReview_helper_unlock_tool"|trans({},'icap_dropzone')|raw }}</p> </p>
                </div>
            </div>
        </div>
        <style>
            .panel-default > .panel-heading {
                background-color: #fff;
            }
        </style>

        <script>
            $(document).on('ready', function () {
                $('#peerReview-helper-accordion').on('hide.bs.collapse', function () {
                    $('#accordion .fa-angle-down').show();
                    $('#accordion .fa-angle-right').hide();
                });
                $('#peerReview-helper-accordion').on('show.bs.collapse', function () {
                    $('#accordion .fa-angle-right').show();
                    $('#accordion .fa-angle-down').hide();
                });
            });
        </script>
    </div>
{% endif %}