{% extends 'layouts/base.html.twig' %}

{% block title %}{{ trans('board.new_topic') }} — {{ board.name }}{% endblock %}

{% block content %}
    <section class="page-header">
        <p class="breadcrumb"><a href="/">{{ trans('common.boards') }}</a> / <a href="/board/{{ board.slug }}">{{ board.name }}</a> / {{ trans('board.new_topic_breadcrumb') }}</p>
        <h1>{{ trans('board.new_topic_in', { board: board.name }) }}</h1>
    </section>

    <form method="post" action="/board/{{ board.slug }}/new" class="form form-compose">
        {{ csrf_field() }}
        <label>
            {{ trans('board.title_label') }}
            <input type="text" name="title" required maxlength="{{ input_limits.topic_title_max }}" autofocus>
        </label>
        <label>
            {{ trans('board.tags_optional') }}
            <input type="text" name="tags" maxlength="200" placeholder="{{ trans('board.tags_placeholder') }}" list="tag-suggestions" autocomplete="off">
            <span class="muted">{{ trans('board.tags_hint', { max: max_tags }) }}</span>
        </label>
        <datalist id="tag-suggestions"></datalist>
        <label>
            {{ trans('board.message') }}
            {% include 'partials/composer.twig' with { draft_key: 'new-topic-' ~ board.slug, required: true, rows: 10, autocomplete: 'one-time-code' } %}
        </label>
        <button type="submit" class="btn btn-primary">{{ trans('board.post_topic') }}</button>
    </form>
{% endblock %}

{% block scripts %}
    <link rel="stylesheet" href="/assets/css/highlight.css?v={{ asset_version }}">
    <script src="/assets/js/highlight.min.js?v={{ asset_version }}" defer></script>
    <script src="/assets/js/editor.js?v={{ asset_version }}" defer></script>
    <script src="/assets/js/tags.js?v={{ asset_version }}" defer></script>
{% endblock %}