{% extends "base.html" %}
{% from 'bootstrap/form.html' import render_form, render_field %}

{% block app_content %}
<div class="row">
    <div class="col-8 position-relative">
        <h1>{{ _('Create post') }}</h1>
        <form method="post">
            {{ form.csrf_token() }}
            {{ render_field(form.communities) }}
            <nav id="post_type_chooser">
              <div class="nav nav-tabs nav-justified" id="typeTab" role="tablist">
                <button class="nav-link active" id="discussion-tab" data-bs-toggle="tab" data-bs-target="#discussion-tab-pane"
                        type="button" role="tab" aria-controls="discussion-tab-pane" aria-selected="true">Discussion</button>
                <button class="nav-link" id="link-tab" data-bs-toggle="tab" data-bs-target="#link-tab-pane"
                        type="button" role="tab" aria-controls="link-tab-pane" aria-selected="false">Link</button>
                <button class="nav-link" id="image-tab" data-bs-toggle="tab" data-bs-target="#image-tab-pane"
                        type="button" role="tab" aria-controls="image-tab-pane" aria-selected="false" {{ images_disabled }}>Image</button>
                <button class="nav-link" id="poll-tab" data-bs-toggle="tab" data-bs-target="#poll-tab-pane"
                            type="button" role="tab" aria-controls="poll-tab-pane" aria-selected="false" disabled>Poll</button>
              </div>
            </nav>
            <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active" id="discussion-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                  {{ render_field(form.discussion_title) }}
                  {{ render_field(form.discussion_body) }}
              </div>
              <div class="tab-pane fade" id="link-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                  {{ render_field(form.link_title) }}
                  {{ render_field(form.link_url) }}
              </div>
              <div class="tab-pane fade" id="image-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                  {{ render_field(form.image_title) }}
                  {{ render_field(form.image_file) }}
              </div>
              <div class="tab-pane fade" id="poll-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
                  Poll
              </div>
            </div>
            {{ render_field(form.type) }}
            <div class="row mt-4">
                <div class="col-md-1">
                    {{ render_field(form.nsfw) }}
                </div>
                <div class="col-md-1">
                    {{ render_field(form.nsfl) }}
                </div>
                <div class="col">

                </div>
            </div>
            {{ render_field(form.notify) }}
            {{ render_field(form.submit) }}
        </form>
    </div>

    <div class="col-4">
        <div class="card mt-3">
            <div class="card-header">
                 <h2>{{ community.title }}</h2>
            </div>
            <div class="card-body">
                <p>{{ community.description|safe }}</p>
                <p>{{ community.rules|safe }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}