{% include 'public/partials/header.html' %}
<main class="wrap page-shell topic-create-page">
  <div class="breadcrumb">
    <a href="{{ $baseUrl }}/">HOME</a><span>›</span>
    <a href="{{ $baseUrl }}/forum/{{ $forum['id'] }}">{{ strtoupper($forum['name']) }}</a><span>›</span>
    <span>NEW TOPIC</span>
  </div>

  <form method="post" enctype="multipart/form-data" action="{{ $baseUrl }}/forum/{{ $forum['id'] }}/new-topic" class="new-topic-shell" data-topic-composer data-draft-key="forum-{{ $forum['id'] }}">
    <input type="hidden" name="_token" value="{{ $csrfToken }}">

    <div class="new-topic-main">
      <section class="topic-meta-card panel">
        <header class="topic-card-title">
          <div class="topic-card-icon">＋</div>
          <div><strong>New Topic</strong><span>in <b>{{ $forum['name'] }}</b></span></div>
          <span class="draft-state" data-draft-state>Draft saved locally</span>
        </header>

        <div class="topic-field-block">
          <label class="topic-label">Topic Prefix</label>
          <div class="prefix-picker" data-prefix-picker>
            <label><input type="radio" name="prefix_id" value="" {{ empty($forum['require_prefix'])?'checked':'' }}><span>None</span></label>
            {% foreach $prefixes as $prefix %}<label><input type="radio" name="prefix_id" value="{{ $prefix['id'] }}"><span style="--prefix-color:{{ $prefix['color'] }}">{{ $prefix['name'] }}</span></label>{% endforeach %}
          </div>
        </div>

        <div class="topic-field-block">
          <label class="topic-label" for="topicTitle">Title <em>*</em></label>
          <div class="title-input-row">
            <span class="selected-prefix" data-selected-prefix hidden></span>
            <input id="topicTitle" name="title" value="{{ $draft['title'] ?? '' }}" maxlength="120" required autofocus placeholder="Write a clear, descriptive title…" data-title-input>
          </div>
          <span class="field-counter"><b data-title-count>0</b>/120</span>
        </div>

        <div class="topic-field-block">
          <label class="topic-label" for="topicTags">Tags <small>(optional, comma-separated)</small></label>
          <div class="tag-input-wrap"><span>◇</span><input id="topicTags" name="tags" maxlength="255" placeholder="e.g. php, performance, tooling"></div>
        </div>
      </section>

      <section class="topic-editor-card panel">
        <header class="topic-card-title editor-heading">
          <div class="topic-card-icon">▣</div>
          <div><strong>Post Content</strong><span>posting as <b>{{ $currentUser['username'] }}</b></span></div>
        </header>
        <div class="shell-editor-toolbar" data-editor-toolbar>
          <button type="button" data-wrap="[b]|[/b]" title="Bold"><b>B</b></button>
          <button type="button" data-wrap="[i]|[/i]" title="Italic"><i>I</i></button>
          <button type="button" data-wrap="[code]|[/code]" title="Code">&lt;/&gt;</button>
          <button type="button" data-wrap="[url=]|[/url]" title="Link">🔗</button>
          <button type="button" data-wrap="[img]|[/img]" title="Image">▧</button>
          <button type="button" data-wrap="[quote]|[/quote]" title="Quote">❞</button>
          <i></i>
          <button type="button" data-insert="🙂" class="wide">☺ Smilies</button>
          {% if $canAttach %}<button type="button" class="wide" data-attachment-notice>⌕ Attach</button>{% else %}<button type="button" class="wide" disabled title="Your group cannot attach files in this forum">⌕ Attach disabled</button>{% endif %}
        </div>
        <textarea id="topicBody" name="body" rows="14" maxlength="20000" required placeholder="Write your post here…&#10;&#10;Markdown and BBCode are both supported." data-body-input></textarea>
        <footer class="editor-status"><span><b data-body-count>0</b> chars</span><span><kbd>Ctrl+B</kbd> bold · <kbd>Ctrl+I</kbd> italic · <kbd>Ctrl+K</kbd> link</span></footer>
        {% if $canAttach %}<label class="attachment-drop topic-attachment-drop"><span>Attachments</span><input id="topicAttachments" type="file" name="attachments[]" multiple accept="{{ $attachmentAccept }}" data-attachment-input data-allowed-extensions="{{ $allowedAttachmentExtensions }}"><small>Allowed: {{ $allowedAttachmentExtensions }} · Up to {{ round($boardSettings['max_attachment_size_bytes']/1048576,1) }} MB each · {{ $boardSettings['max_attachments_per_post'] }} files maximum.</small></label>{% endif %}
      </section>

      <section class="topic-options-card panel">
        <h3>Post Options</h3>
        <div class="topic-option-row">
          <label class="shell-check"><input type="checkbox" name="subscribe" value="1" checked><span></span><b>Watch this topic</b><small>Receive notifications for new replies</small></label>
          {% if $canCreatePoll %}<label class="shell-switch poll-master-toggle"><input type="checkbox" name="poll_enabled" value="1" data-poll-toggle><span></span><div><b>Attach a poll</b><small>Let members vote on choices</small></div></label>{% else %}<div class="option-disabled-note"><b>Polls unavailable</b><small>Your group cannot create polls in this forum.</small></div>{% endif %}
        </div>
      </section>

      <div class="topic-submit-row">
        <a class="btn secondary" href="{{ $baseUrl }}/forum/{{ $forum['id'] }}">Cancel</a>
        <button class="btn topic-preview-btn" type="button" data-preview-topic>Preview</button>
        <button class="btn publish-topic-btn" type="submit">Publish Topic <span>→</span></button>
      </div>
    </div>

    {% if $canCreatePoll %}<aside class="poll-drawer panel" data-poll-drawer aria-hidden="true">
      <header>
        <div class="poll-title-wrap"><span class="poll-symbol">▥</span><div><strong>Poll Options</strong><small>Configure voting for this topic</small></div></div>
        <button type="button" data-close-poll aria-label="Close poll">×</button>
      </header>

      <div class="poll-content">
        <label class="topic-label" for="pollQuestion">Poll Question <em>*</em></label>
        <input id="pollQuestion" name="poll_question" maxlength="255" placeholder="What would you like to ask?">

        <div class="poll-options" data-poll-options>
          <div class="field-label"><span>Answer Options</span><small>2–10 choices</small></div>
          <div class="poll-option"><span>1</span><input name="poll_options[]" maxlength="255" placeholder="First option"><button type="button" aria-label="Remove option" disabled>×</button></div>
          <div class="poll-option"><span>2</span><input name="poll_options[]" maxlength="255" placeholder="Second option"><button type="button" aria-label="Remove option" disabled>×</button></div>
        </div>
        <button type="button" class="add-option" data-add-poll-option>＋ Add another option</button>

        <div class="poll-rule">
          <label class="topic-label">Poll Type</label>
          <div class="segmented-control" data-poll-type-buttons>
            <label><input type="radio" name="poll_type" value="single" checked><span>Single choice</span></label>
            <label><input type="radio" name="poll_type" value="multiple"><span>Multiple choice</span></label>
          </div>
        </div>

        <label class="poll-number-rule" data-max-choices hidden><span><b>Maximum choices</b><small>Selections allowed per voter</small></span><span class="number-stepper"><button type="button" data-step-down>−</button><input type="number" name="poll_max_choices" min="2" max="10" value="2"><button type="button" data-step-up>＋</button></span></label>

        <div class="poll-rule">
          <label class="topic-label">Poll Duration</label>
          <div class="duration-picker">
            <label><input type="radio" name="poll_duration" value="7" checked><span>7 days</span></label>
            <label><input type="radio" name="poll_duration" value="14"><span>14 days</span></label>
            <label><input type="radio" name="poll_duration" value="30"><span>30 days</span></label>
            <label><input type="radio" name="poll_duration" value="0"><span>∞</span></label>
          </div>
        </div>

        <div class="poll-rule">
          <label class="topic-label">Show Results</label>
          <div class="poll-result-list">
            <label><input type="radio" name="poll_results_visibility" value="always"><span><b>Always visible</b><small>Results can be viewed before voting</small></span></label>
            <label><input type="radio" name="poll_results_visibility" value="voted" checked><span><b>After voting</b><small>Members vote before seeing results</small></span></label>
            <label><input type="radio" name="poll_results_visibility" value="closed"><span><b>After poll closes</b><small>Hidden until voting has ended</small></span></label>
          </div>
        </div>

        <label class="poll-change-row"><span><b>Allow vote changes</b><small>Members may update their selection</small></span><span class="shell-switch"><input type="checkbox" name="poll_allow_change" value="1" checked><i></i></span></label>
        <div class="poll-ready-badge">✓ Poll will be attached to this topic</div>
      </div>
    </aside>{% endif %}
  </form>

  <dialog class="topic-preview-dialog" data-topic-preview>
    <button type="button" data-close-preview>×</button><div class="eyebrow">Topic preview</div><h2 data-preview-title>Untitled topic</h2><div class="preview-copy" data-preview-body>No content yet.</div>
  </dialog>
</main>
{% include 'public/partials/footer.html' %}