f3-simple-blog/app/Views/admin/post_form.html

<section class="stack-lg" aria-labelledby="post-form-title">
  <header class="page-header">
    <h1 class="page-title" id="post-form-title">{{ @pageTitle }}</h1>

    <div class="page-actions">
      <a class="button button--ghost" href="{{ 'dashboard' | alias }}">Retour</a>
    </div>
  </header>

  <div class="editor-layout" data-editor-layout>
    <form class="panel stack editor-form" method="post" action="{{ @formAction }}">
      <input type="hidden" name="csrf_token" value="{{ @CSRF }}">
      <input type="hidden" name="cover_media_id" value="{{ @post.cover_media_id }}" data-cover-input>

      <label class="field">
        <span class="field-label">Titre</span>
        <input class="control" type="text" name="title" value="{{ @post.title }}" maxlength="{{ @titleMax }}" required data-char-count>
        <span class="char-counter"><span data-char-count-value>0</span> / {{ @titleMax }}</span>
      </label>

      <label class="field">
        <span class="field-label">Extrait</span>
        <textarea class="control" name="excerpt" rows="3" maxlength="{{ @excerptMax }}" required data-char-count>{{ @post.excerpt }}</textarea>
        <span class="char-counter"><span data-char-count-value>0</span> / {{ @excerptMax }}</span>
      </label>

      <section class="field cover-field">
        <div class="field-head">
          <div>
            <h2 class="field-label">Image de couverture</h2>
            <p class="field-help">Choisis une image si tu veux une couverture.</p>
          </div>
        </div>

        <div class="cover-picker">
          <check if="{{ @coverPreview }}">
            <true>
              <img class="media-frame media-frame--large cover-preview" data-cover-preview src="{{ @coverPreview.url }}" alt="">
              <div class="media-frame media-frame--large media-frame--placeholder is-hidden" data-cover-placeholder>Aucune image</div>
            </true>
            <false>
              <div class="media-frame media-frame--large media-frame--placeholder" data-cover-placeholder>Aucune image</div>
              <img class="media-frame media-frame--large cover-preview is-hidden" data-cover-preview alt="Aperçu couverture">
            </false>
          </check>

          <div class="button-row">
            <button class="button button--ghost" type="button" data-media-picker-open="cover">Choisir une image</button>
            <button class="button button--ghost" type="button" data-cover-clear {{ @post.cover_media_id ? '' : 'disabled' }}>Retirer</button>
          </div>
        </div>
      </section>

      <section class="field">
        <div class="field-head">
          <div>
            <h2 class="field-label">Contenu</h2>
            <p class="field-help">Markdown simple, avec insertion d’image au curseur.</p>
          </div>
        </div>

        <div class="toolbar" role="toolbar" aria-label="Outils Markdown">
          <button class="tool-button" type="button" data-md-action="bold"><strong>Gras</strong></button>
          <button class="tool-button" type="button" data-md-action="italic"><em>Italique</em></button>
          <button class="tool-button" type="button" data-md-action="heading">Titre</button>
          <button class="tool-button" type="button" data-md-action="list">Liste</button>
          <button class="tool-button" type="button" data-md-action="quote">Citation</button>
          <button class="tool-button" type="button" data-md-action="link">Lien</button>
          <button class="tool-button" type="button" data-md-action="code">Code</button>
          <button class="tool-button" type="button" data-media-picker-open="markdown">Image</button>
        </div>

        <textarea class="control editor-textarea" name="body_markdown" rows="18" required data-markdown-editor>{{ @post.body_markdown }}</textarea>
      </section>

      <button class="button" type="submit">Enregistrer</button>
    </form>

    <aside class="media-picker is-hidden" data-media-picker>
      <div class="media-picker__head">
        <div>
          <strong data-media-picker-title>Choisir une image</strong>
          <p class="field-help" data-media-picker-help>Choisis une image de la médiathèque.</p>
        </div>
        <button class="button button--ghost button--small" type="button" data-media-picker-close>Fermer</button>
      </div>

      <check if="{{ @mediaItems }}">
        <true>
          <div class="media-picker__grid">
            <repeat group="{{ @mediaItems }}" value="{{ @item }}">
              <button class="media-picker__item" type="button" data-media-picker-select data-media-id="{{ @item.id }}" data-media-url="{{ @item.url }}" data-media-markdown="{{ @item.markdown }}">
                <img class="media-frame media-frame--square" src="{{ @item.url }}" alt="">
              </button>
            </repeat>
          </div>
          <check if="{{ @mediaPickerTruncated }}">
            <true>
              <p class="field-help">Affichage limité aux {{ @mediaPickerLimit }} images les plus récentes sur {{ @mediaCount }}. Utilise la <a href="{{ 'media_index' | alias }}">médiathèque</a> pour parcourir toute la bibliothèque.</p>
            </true>
          </check>
        </true>
        <false>
          <section class="empty-state" aria-labelledby="media-picker-empty-title">
            <h2 class="card-title" id="media-picker-empty-title">Aucune image disponible</h2>
            <p>Ajoute une image depuis la médiathèque.</p>
          </section>
        </false>
      </check>
    </aside>
  </div>
</section>