nordabiz/templates/forum/new_topic.html

{% extends "base.html" %}

{% block title %}Nowy temat - Forum - Norda Biznes Hub{% endblock %}

{% block extra_css %}
<style>
    .new-topic-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .topic-breadcrumb {
        margin-bottom: var(--spacing-lg);
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
    }

    .topic-breadcrumb a {
        color: var(--primary);
        text-decoration: none;
    }

    .topic-breadcrumb a:hover {
        text-decoration: underline;
    }

    .new-topic-form {
        background: var(--surface);
        border-radius: var(--radius-xl);
        padding: var(--spacing-2xl);
        box-shadow: var(--shadow-lg);
    }

    .form-header {
        margin-bottom: var(--spacing-xl);
    }

    .form-header h1 {
        font-size: var(--font-size-2xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .form-header p {
        color: var(--text-secondary);
    }

    .form-group {
        margin-bottom: var(--spacing-lg);
    }

    .form-label {
        display: block;
        font-weight: 500;
        margin-bottom: var(--spacing-sm);
        color: var(--text-primary);
    }

    .form-label .required {
        color: var(--error);
    }

    .form-input {
        width: 100%;
        padding: var(--spacing-md);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        font-size: var(--font-size-base);
        font-family: var(--font-family);
        transition: var(--transition);
    }

    .form-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    .form-textarea {
        min-height: 200px;
        resize: vertical;
    }

    .form-hint {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
        margin-top: var(--spacing-xs);
    }

    .form-actions {
        display: flex;
        gap: var(--spacing-md);
        margin-top: var(--spacing-xl);
    }

    .guidelines {
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        border-radius: var(--radius);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
    }

    .guidelines h3 {
        font-size: var(--font-size-base);
        font-weight: 600;
        color: #0369a1;
        margin-bottom: var(--spacing-sm);
    }

    .guidelines ul {
        margin: 0;
        padding-left: var(--spacing-lg);
        color: #0c4a6e;
        font-size: var(--font-size-sm);
    }

    .guidelines li {
        margin-bottom: var(--spacing-xs);
    }

    @media (max-width: 768px) {
        .new-topic-form {
            padding: var(--spacing-lg);
        }

        .form-actions {
            flex-direction: column;
        }

        .form-actions .btn {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="new-topic-container">
    <nav class="topic-breadcrumb">
        <a href="{{ url_for('forum_index') }}">Forum</a> &raquo; Nowy temat
    </nav>

    <div class="new-topic-form">
        <div class="form-header">
            <h1>Utworz nowy temat</h1>
            <p>Rozpocznij dyskusje z innymi czlonkami Norda Biznes</p>
        </div>

        <div class="guidelines">
            <h3>Zasady forum</h3>
            <ul>
                <li>Pisz zwiezle i na temat</li>
                <li>Szanuj innych czlonkow</li>
                <li>Nie publikuj reklam ani spamu</li>
                <li>Unikaj poufnych informacji biznesowych</li>
            </ul>
        </div>

        <form method="POST" action="{{ url_for('forum_new_topic') }}" novalidate>
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <div class="form-group">
                <label for="title" class="form-label">
                    Tytul tematu <span class="required">*</span>
                </label>
                <input
                    type="text"
                    id="title"
                    name="title"
                    class="form-input"
                    placeholder="Krotki, opisowy tytul..."
                    required
                    maxlength="255"
                    minlength="5"
                    autofocus
                >
                <p class="form-hint">Minimum 5 znakow. Dobry tytul zacheca do dyskusji.</p>
            </div>

            <div class="form-group">
                <label for="content" class="form-label">
                    Tresc <span class="required">*</span>
                </label>
                <textarea
                    id="content"
                    name="content"
                    class="form-input form-textarea"
                    placeholder="Opisz temat, zadaj pytanie lub podziel sie informacja..."
                    required
                    minlength="10"
                ></textarea>
                <p class="form-hint">Minimum 10 znakow. Im wiecej szczegolow, tym lepsze odpowiedzi.</p>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary btn-lg">
                    Utworz temat
                </button>
                <a href="{{ url_for('forum_index') }}" class="btn btn-outline btn-lg">
                    Anuluj
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
    // Client-side validation
    document.querySelector('form').addEventListener('submit', function(e) {
        const title = document.getElementById('title');
        const content = document.getElementById('content');
        let valid = true;

        if (title.value.length < 5) {
            title.style.borderColor = 'var(--error)';
            valid = false;
        } else {
            title.style.borderColor = '';
        }

        if (content.value.length < 10) {
            content.style.borderColor = 'var(--error)';
            valid = false;
        } else {
            content.style.borderColor = '';
        }

        if (!valid) {
            e.preventDefault();
        }
    });
{% endblock %}