{# templates/components/post/_composer.html.twig #}
<div class="card shadow-none border mb-3">
  <div class="card-body">
    <form method="post"
          action="{{ path('post_create', { mur: mur.id }) }}"
          enctype="multipart/form-data"
          data-turbo-stream="true"
          data-controller="wall-composer"
          data-action="turbo:submit-start->wall-composer#submitStart turbo:submit-end->wall-composer#submitted">

      <input type="hidden" name="_token" value="{{ csrf_token('post_create_' ~ mur.id) }}">
      <input type="hidden" name="type" value="STATUS">

      <div class="form-floating mb-3">
        <textarea class="form-control h-140" placeholder="Exprimez-vous…" id="composerContent" name="content" data-wall-composer-target="content" data-action="input->wall-composer#toggleSubmit"></textarea>
        <label for="composerContent">Partagez votre pensée</label>
      </div>

      <div class="d-flex align-items-center gap-3 flex-wrap">
        <input type="file"
               name="media[]"
               class="d-none"
               accept="image/*"
               multiple
               data-wall-composer-target="fileInput"
               data-action="change->wall-composer#preview">

        <button type="button"
                class="d-flex align-items-center round-32 justify-content-center btn btn-primary rounded-circle js-pick-photos"
                title="Ajouter des photos"
                data-action="wall-composer#pickPhotos">
          <i class="ti ti-photo"></i>
        </button>
        <span class="text-dark link-primary pe-3 py-2">Photo(s)</span>

        <button type="submit" class="btn btn-primary ms-auto" data-wall-composer-target="submit">Publier</button>
      </div>
      <div class="mt-3 js-composer-preview d-none" data-wall-composer-target="preview"></div>
      <div class="form-text text-muted mt-1">Jusqu’à 10 photos, 5 Mo max chacune.</div>
    </form>
  </div>
</div>