{% set transcription_id = id|default('transcription-' ~ random()) %}

{% set title = title|default('Transcription'|t) %}
{% set collapse_id = 'fr-transcription__collapse-transcription' ~ transcription_id %}
{% set modal_id = 'fr-transcription__modal-transcription-' ~ transcription_id %}
<div{{ attributes.addClass('fr-transcription') }}>
  <button class="fr-transcription__btn" aria-expanded="{{ expanded ? 'true' : 'false' }}" aria-controls="{{ collapse_id }}" type="button">
    {{ 'Transcription'|t }}</button>
  <div class="fr-collapse {{ expanded ? 'fr-collapse--expanded' }}" id="{{ collapse_id }}">
    <div class="fr-transcription__footer">
      <div class="fr-transcription__actions-group">
        {{ include('ui_suite_dsfr:button', {
          attributes: create_attribute()
            .addClass(['fr-btn--fullscreen'])
            .setAttribute('aria-controls', modal_id)
            .setAttribute('data-fr-opened', 'false')
            .setAttribute('aria-label', enlarge_aria_label|default('Enlarge transcription'|t))
            .setAttribute('data-fr-js-modal-button', 'true'),
          label: enlarge_text|default('Enlarge'|t),
        }, with_context: false) }}
      </div>
    </div>
    {% set modal_attributes = modal_attributes|default(create_attribute()) %}
    {{ include('ui_suite_dsfr:modal', {
      title: title,
      body: content,
      id: modal_id,
      close_title: 'Close transcription modal'|t,
      attributes: modal_attributes.addClass(['fr-col-12', 'fr-col-md-10', 'fr-col-lg-8']),
    }, with_context: false) }}
  </div>
</div>
