tecvico-website/templates/projects/brief_wizard.html

{% extends "portal_base.html" %}
{% load static %}

{% block title %}{{ form_title }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/brief-wizard.css' %}" />
{% endblock %}

{% block portal_title %}{{ form_title }}{% endblock %}
{% block portal_subtitle %}Turn your scientific or technical challenge into a clear, review-ready scope.{% endblock %}

{% block portal_content %}
<div class="dashboard-form-layout dashboard-form-layout--wizard">
  <section class="dashboard-panel dashboard-form-card">
      <form method="post" enctype="multipart/form-data" novalidate class="brief-wizard" data-brief-wizard data-initial-step="{{ initial_step }}">
        {% csrf_token %}

        <div class="wizard-progress" aria-hidden="true">
          <div class="wizard-progress-track">
            <div class="wizard-progress-fill" data-wizard-progress-fill></div>
          </div>
        </div>

        <ol class="wizard-stepper" role="list">
          {% for step in wizard_steps %}
          <li class="wizard-stepper-item{% if forloop.first %} is-active{% endif %}" data-wizard-step-indicator="{{ forloop.counter }}">
            <span class="wizard-stepper-number">{{ forloop.counter }}</span>
            <span class="wizard-stepper-label">{{ step.title }}</span>
          </li>
          {% endfor %}
        </ol>

        {% for step in wizard_steps %}
        <section
          class="wizard-panel{% if forloop.first %} is-active{% endif %}"
          data-wizard-panel="{{ forloop.counter }}"
          data-step-fields="{{ step.fields|join:',' }}"
          aria-labelledby="wizard-step-title-{{ forloop.counter }}"
          {% if not forloop.first %}hidden{% endif %}
        >
          <header class="wizard-panel-header">
            <p class="wizard-panel-eyebrow">Step {{ forloop.counter }} of {{ wizard_steps|length }}</p>
            <h2 class="wizard-panel-title" id="wizard-step-title-{{ forloop.counter }}">{{ step.title }}</h2>
            <p class="wizard-panel-subtitle">{{ step.subtitle }}</p>
          </header>

          {% if step.id == "basics" %}
          <div class="form-group">
            <label for="id_title">Project title <span class="required-star">*</span></label>
            {{ form.title }}
            {{ form.title.errors }}
          </div>
          <div class="form-group">
            <label for="id_category">Category</label>
            {{ form.category }}
            {{ form.category.errors }}
          </div>
          {% endif %}

          {% if step.id == "scope" %}
          <div class="form-group">
            <label for="id_description">Description &amp; goals</label>
            {{ form.description }}
            <p class="form-hint">Describe the project scope, context, and the outcomes you expect.</p>
            {{ form.description.errors }}
          </div>
          {% endif %}

          {% if step.id == "timeline" %}
          <div class="form-grid form-grid--2">
            <div class="form-group">
              <label for="id_budget_range">Budget range</label>
              {{ form.budget_range }}
              {{ form.budget_range.errors }}
            </div>
            <div class="form-group">
              <label for="id_desired_deadline">Desired deadline</label>
              {{ form.desired_deadline }}
              {{ form.desired_deadline.errors }}
            </div>
          </div>
          {% endif %}

          {% if step.id == "references" %}
          <div class="form-group">
            <label for="id_reference_links">Reference links</label>
            {{ form.reference_links }}
            <p class="form-hint">One URL per line — docs, mockups, repos, etc.</p>
            {{ form.reference_links.errors }}
          </div>

          <div class="form-group">
            <label for="id_attachments">Attachments</label>
            <input type="file" name="attachments" id="id_attachments" multiple
                   accept=".png,.jpg,.jpeg,.gif,.webp,.bmp,.zip,.log,.txt"
                   class="file-input"
                   {% if brief and brief.attachments_locked %}disabled{% endif %} />
            <p class="form-hint">Images, ZIP, or log/text files — up to 3 files, 10 MB each.</p>
            {{ form.attachments.errors }}
          </div>

          {% if brief and brief.attachments.exists %}
          <div class="portal-attachment-list">
            <p class="form-hint">Existing attachments:</p>
            <ul>
              {% for attachment in brief.attachments.all %}
              <li>{{ attachment.original_filename }}</li>
              {% endfor %}
            </ul>
          </div>
          {% endif %}

          <div class="wizard-review" data-wizard-review hidden>
            <h3 class="wizard-review-title">Review your brief</h3>
            <dl class="wizard-review-list">
              <div><dt>Title</dt><dd data-review-field="title">—</dd></div>
              <div><dt>Category</dt><dd data-review-field="category">—</dd></div>
              <div><dt>Description &amp; goals</dt><dd data-review-field="description">—</dd></div>
              <div><dt>Budget</dt><dd data-review-field="budget_range">—</dd></div>
              <div><dt>Deadline</dt><dd data-review-field="desired_deadline">—</dd></div>
              <div><dt>Reference links</dt><dd data-review-field="reference_links">—</dd></div>
              <div><dt>New attachments</dt><dd data-review-field="attachments">None</dd></div>
            </dl>
          </div>
          {% endif %}
        </section>
        {% endfor %}

        <div class="wizard-actions">
          <button type="button" class="btn-ghost" data-wizard-prev hidden>Back</button>
          <button type="button" class="btn-primary" data-wizard-next>Continue</button>
          <button type="submit" class="btn-primary btn-submit" data-wizard-submit hidden>{{ submit_label }}</button>
        </div>
      </form>
  </section>
  <aside class="brief-guidance-card">
    <span class="brief-guidance-card__eyebrow">Before you submit</span>
    <h2>A strong brief helps us respond precisely.</h2>
    <ul>
      <li><span>1</span><div><strong>Define the outcome</strong><p>Focus on the scientific or technical result you need.</p></div></li>
      <li><span>2</span><div><strong>Add useful context</strong><p>Include datasets, constraints, methods, or references.</p></div></li>
      <li><span>3</span><div><strong>Set expectations</strong><p>Share your preferred timeline and budget range.</p></div></li>
    </ul>
    <p class="brief-guidance-card__note">You can review every field in the final step before submission.</p>
  </aside>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/brief-wizard.js' %}"></script>
{% endblock %}