{#<div class="sp_panel__header"></div>#}
<div class="sp_panel__content">
    {{ form_start(form, {'attr': {'id': 'node-form', 'class': 'sp_form__xhr'}}) }}
        <section class="sp_panel__section">
            <div class="sp_panel__section-title">
                <label>1) Drag and place the node to the desired location</label>
            </div>
            <div class="sp_form-row_inline-container">
                <div class="sp_form-row__text">
                    {{ form_label(form.coordX, 'Pos X') }}
                    {{ form_widget(form.coordX) }}
                </div>
                <div class="sp_form-row__text">
                    {{ form_label(form.coordY, 'Pos Y') }}
                    {{ form_widget(form.coordY) }}
                </div>
            </div>
            <div class="sp_panel__section-title">
                <label>2) Set quantity</label>
            </div>
            <div class="sp_form-row__text">
                {{ form_label(form.quantity) }}
                {{ form_widget(form.quantity) }}
            </div>
            <div class="sp_panel__section-title">
                <label>3) Set primogems quantity</label>
            </div>
            <div class="sp_form-row__text">
                {{ form_label(form.primogem) }}
                {{ form_widget(form.primogem) }}
            </div>
            <div class="sp_panel__section-title">
                <label>4) Write some helping text </label>
            </div>
            <div class="sp_form-row__textarea">
                {{ form_label(form.description) }}
                {{ form_widget(form.description) }}
            </div>
            <div class="sp_panel__section-title">
                <label>5) Add a screenshot if any</label>
            </div>
            <div class="sp_form-row__file">
                {{ form_label(form.screenshotA, 'Screenshot 1') }}
                <input name="file-path" type="text" disabled>
                <span class="sp_input__file-preview">
                    <img id="screenshot-a-preview" src="{{ asset(node.screenshotA ? assets.screenshot.thumbnail_path ~ node.screenshotA : assets.img._blank_xs) }}" alt>
                </span>
                {{ form_widget(form.screenshotA, {'attr': {'class': 'sp_input__format-screenshot', 'data-file-preview-target': 'screenshot-a-preview'}}) }}
            </div>
            <div class="sp_form-row__file">
                {{ form_label(form.screenshotB, 'Screenshot 2') }}
                <input name="file-path" type="text" disabled>
                <span class="sp_input__file-preview">
                    <img id="screenshot-b-preview" src="{{ asset(node.screenshotB ? assets.screenshot.thumbnail_path ~ node.screenshotB : assets.img._blank_xs) }}" alt>
                </span>
                {{ form_widget(form.screenshotB, {'attr': {'class': 'sp_input__format-screenshot', 'data-file-preview-target': 'screenshot-b-preview'}}) }}
            </div>
            <div class="sp_form-row__file">
                {{ form_label(form.screenshotC, 'Screenshot 3') }}
                <input name="file-path" type="text" disabled>
                <span class="sp_input__file-preview">
                    <img id="screenshot-c-preview" src="{{ asset(node.screenshotC ? assets.screenshot.thumbnail_path ~ node.screenshotC : assets.img._blank_xs) }}" alt>
                </span>
                {{ form_widget(form.screenshotC, {'attr': {'class': 'sp_input__format-screenshot', 'data-file-preview-target': 'screenshot-c-preview'}}) }}
            </div>
            <div class="sp_form-row__file">
                {{ form_label(form.screenshotD, 'Screenshot 4') }}
                <input name="file-path" type="text" disabled>
                <span class="sp_input__file-preview">
                    <img id="screenshot-d-preview" src="{{ asset(node.screenshotD ? assets.screenshot.thumbnail_path ~ node.screenshotD : assets.img._blank_xs) }}" alt>
                </span>
                {{ form_widget(form.screenshotD, {'attr': {'class': 'sp_input__format-screenshot', 'data-file-preview-target': 'screenshot-d-preview'}}) }}
            </div>
            <div class="sp_form-row__file">
                {{ form_label(form.screenshotE, 'Screenshot 5') }}
                <input name="file-path" type="text" disabled>
                <span class="sp_input__file-preview">
                    <img id="screenshot-e-preview" src="{{ asset(node.screenshotE ? assets.screenshot.thumbnail_path ~ node.screenshotE : assets.img._blank_xs) }}" alt>
                </span>
                {{ form_widget(form.screenshotE, {'attr': {'class': 'sp_input__format-screenshot', 'data-file-preview-target': 'screenshot-e-preview'}}) }}
            </div>
            <div class="sp_panel__section-title">
                <label>6) Add YouTube video link if any</label>
            </div>
            <div class="sp_form-row__radio sp_radio__layout-grid-b sp_radio__style-text">
                {{ form_label(form.version, null, {'label_attr': {'class': 'sp_radio__main-label'}}) }}
                <div class="sp_radio__container">
                    {% for key, choice in form.version %}
                        <label class="sp_radio__input-wrapper" title="{{ choice.vars.label }}">
                            <span class="sp_radio__input-mark"></span>
                            <span class="sp_radio__input-label">{{ choice.vars.label }}</span>
                            <input name="{{ choice.vars.full_name }}" type="{{ choice.parent.vars.multiple ? 'checkbox' : 'radio' }}" value="{{ choice.vars.value }}" {% if key == 0 and choice.vars.required %}required{% endif%} {% if choice.vars.checked %}checked{% endif %}>
                        </label>
                    {% endfor %}
                    {% do form.version.setRendered %}
                </div>
            </div>
            <div class="sp_form-row__button">
                <button class="sp_button" data-type="cancel" type="button">
                    <span>Cancel</span>
                </button>
                <button class="sp_button" data-type="validate" type="submit">
                    <span>Save</span>
                </button>
            </div>
        </section>
    {{ form_end(form) }}
    <label id="node-form-coordinate-tracker" class="sp_node__item" hidden>
        <span class="sp_node__background">
            <img src="{{ asset(worldmark.icon ? assets.worldmark.upload_path ~ worldmark.icon : assets.img._blank_xs) }}" alt>
        </span>
        <span class="sp_node__guidelines"></span>
    </label>
</div>