{% extends 'layout.html.twig' %}

{% form_theme form _self %}

{% block quill_widget %}
    <div {{ stimulus_controller('quill') }} class="quill" data-id="{{ id }}" >
        <div id="editor">
            {{ value|raw }}
        </div>
    </div>
    <input type="hidden" {{ block('widget_attributes') }} value="{{ value }}" />
{% endblock %}

{% block body %}
    <div class="w-container">
        {% if not is_granted('ROLE_USER') %}
        <div class="notice info">
            <p>Login is required to post articles.</p>
        </div>
        {% endif %}
        <div {{ stimulus_controller('nostr-publish', {
            publishUrl: path('api-article-publish'),
            csrfToken: csrf_token('nostr_publish')
            }) }} data-nostr-publish-target="form" data-slug="{{ article.slug|default('') }}">

            <!-- Status messages -->
            <div data-nostr-publish-target="status"></div>

            {{ form_start(form) }}

            {{ form_row(form.title) }}
            {{ form_row(form.summary) }}
            {{ form_row(form.content) }}
            {{ form_row(form.image) }}

            <div class="actions" data-controller="image-upload">
              <button type="button"
                      class="btn btn-secondary"
                      data-action="click->image-upload#openDialog">
                Upload Image
              </button>

              <div data-image-upload-target="dialog" class="iu-dialog">
                  <div class="iu-backdrop" data-action="click->image-upload#closeDialog"></div>
                  <div class="iu-modal">
                      <div class="modal-header">
                          <h5>Upload Image</h5>
                          <button type="button" class="close" data-action="click->image-upload#closeDialog">&times;</button>
                      </div>
                      <div class="modal-body">
                          <div>
                              <label for="upload-provider">Upload to</label>
                              <select id="upload-provider" data-image-upload-target="provider">
                                  <option value="sovbit">files.sovbit.host</option>
                                  <option value="nostrbuild">nostr.build</option>
                                  <option value="nostrcheck">nostrcheck.me</option>
                              </select>
                          </div>

                          <div data-image-upload-target="dropArea" class="upload-area">
                              <span>Drag &amp; drop or click to select an image</span>
                              <input type="file" accept="image/*" data-image-upload-target="fileInput">
                          </div>

                          <div data-image-upload-target="progress" class="upload-progress"></div>
                          <div data-image-upload-target="error" class="upload-error"></div>
                      </div>
                  </div>
                 </div>
            </div>


            {{ form_row(form.topics) }}

            <div class="actions">
                <button type="button"
                        class="btn btn-primary"
                        data-nostr-publish-target="publishButton"
                        data-action="click->nostr-publish#publish">
                    Publish
                </button>
            </div>

            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}