{% set TEXTAREA_MAXLENGTH = 2048 %}

{% macro confirmationModal(id, header, message, i18n) %}
    <div id="{{id}}" class="modal modal-dialog modal__default" role="menu" >
        <h3 class="modal--header">
            {{ header }}
            <a class="close modal-dismiss" rel="modal:close"></a>
        </h3>
        <div class="modal--content modal-content">
            {{ message }}
        </div>
        <menu class="modal--footer toolbar toolbar__polar modal-footer">
            <menu class="toolbar--item modal-footer-left">
                <menu class="toolbar--item">
                    <button type="button" class="button toolbar--item button__primary" aria-label="confirm" rel="modal:confirm">
                        {{ i18n.labels.confirm }}
                    </button>
                    <button type="button"  class="button toolbar--item button__secret" aria-label="cancel" rel="modal:close">
                        {{ i18n.labels.cancel }}
                    </button>
                </menu>
            </menu>
        </menu>
    </div>
{% endmacro %}
{% macro questionForm(i18n, title = "", description = "") %}
    <form class="form form--compact js-profile-entry-form" role="form">
        <div data-fieldsets="" class="form--fieldset">
            <fieldset data-fields="">
                <div class="form--field" data-field-type="input" data-field-required="true">
                    <label class="" for="question-title">
                        {{ i18n.labels.question }}
                        <span class="label--error js-error-message" data-message-required="{{ i18n.messages.error.fieldRequired }}"></span>
                    </label>
                    <input name="title" type="text" value="{{title}}">
                </div>
                <div class="form--field" data-field-type="textarea" data-field-required="true">
                    <label class="" for="question-description">
                        {{ i18n.labels.description }}
                        <span class="label--error js-error-message" data-message-required="{{ i18n.messages.error.fieldRequired }}" data-message-maxlength="{{ i18n.messages.error.textareaMaxLength }}"></span>
                    </label>
                    <div class="js-maxlength js-maxlength-textarea">
                        <textarea name="comment" data-maxlength="{{ TEXTAREA_MAXLENGTH }}">{{description}}</textarea>
                        <div class="js-maxlength-count">{{ TEXTAREA_MAXLENGTH }}</div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="layout-section"></div>
        <button type="submit" class="button__primary is-hidden">false</button>
    </form>
{% endmacro %}
{% macro addQuestionModal(i18n) %}
    <div id="post-entry-form-modal" class="modal modal-dialog modal__default" role="menu" >
        <h3 class="modal--header">
            {{ i18n.labels.askQuestion }}
            <a class="close modal-dismiss" rel="modal:close"></a>
        </h3>
        <div class="modal--content modal-content">
            {{ questionForm(i18n) }}
        </div>
        <menu class="modal--footer toolbar toolbar__polar modal-footer">
            <menu class="toolbar--item modal-footer-left">
                <menu class="toolbar--item">
                    <button type="button" class="button toolbar--item button__primary" aria-label="submit" rel="modal:submit">
                        {{ i18n.labels.submit }}
                    </button>
                    <button type="button" class="button toolbar--item button__secret" aria-label="cancel" rel="modal:close">
                        {{ i18n.labels.cancel }}
                    </button>
                </menu>
            </menu>
        </menu>
    </div>
{% endmacro %}
{% macro editQuestion(i18n, title = "", description = "") %}
    <div class="js-profile-edit-entry is-hidden">
        {{ questionForm(i18n, title, description) }}
        <menu class="toolbar--item">
            <button type="button" data-auto="submit" class="button toolbar--item button__primary" aria-label="submit" rel="edit:submit">
                {{ i18n.labels.submit }}
            </button>
            <button type="button" data-auto="reject" class="button toolbar--item button__secret" aria-label="cancel" rel="edit:cancel">
                {{ i18n.labels.cancel }}
            </button>
        </menu>
    </div>
{% endmacro %}
{% macro commentForm(i18n) %}
    <div class="js-profile-post-comment is-hidden">
        <form class="form form--compact js-profile-entry-comment-form" role="form">
            <div data-fieldsets="" class="form--fieldset">
                <fieldset data-fields="">
                    <div class="form--field" data-field-type="textarea" data-field-required="true">
                        <label>
                            {{ i18n.labels.answerQuestion }}
                            <span class="label--error js-error-message" data-message-required="{{ i18n.messages.error.fieldRequired }}" data-message-maxlength="{{ i18n.messages.error.textareaMaxLength }}"></span>
                        </label>
                        <div class="js-maxlength js-maxlength-textarea">
                            <textarea name="comment" data-maxlength="{{ TEXTAREA_MAXLENGTH }}" placeholder="{{ i18n.labels.writeYourAnswerHere }}"></textarea>
                            <div class="js-maxlength-count">{{ TEXTAREA_MAXLENGTH }}</div>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="layout-section"></div>
            <menu class="toolbar--item">
                <button type="button" data-auto="submit" class="button toolbar--item button__primary" aria-label="{{ i18n.labels.submitComment }}" rel="comment:submit">
                    {{ i18n.labels.submitComment }}
                </button>
                <button type="button" data-auto="reject" class="button toolbar--item button__secret" aria-label="{{ i18n.labels.cancel }}" rel="comment:cancel">
                    {{ i18n.labels.cancel }}
                </button>
            </menu>
        </form>
    </div>
{% endmacro %}