📄 MatDenDagen/Components/Pages/Submission.razor
@page "/submission"
@using MatDenDagen.Models
@layout MainLayout

<div class="submission-page">
  <h1>Skicka in ditt svar</h1>

  <div class="cookbook-intro card">
    <p>Fyll i dina svar på frågorna nedan, skriv så mycket eller lite du vill på varje fråga, eller skippa frågor du
      inte har något svar till.</p>
    </div>

    @if (success)
    {
      <div class="success-message card">
        <h2>Tack för ditt svar!</h2>
      </div>
    }

    @if (errorMessage is not null)
    {
      <div class="error-message card">
        <h3>Ett fel uppstod</h3>
        <p>@errorMessage</p>
      </div>
    }

    @if (questions.Count == 0)
    {
      <div class="card">
        <p>Inga frågor hittades. Var god kontakta administratören.</p>
      </div>
    }
    else
    {
      <form method="post" enctype="multipart/form-data" @formname="Submission" class="submission-form">
        <div class="form-group card">
          <label>
            <span class="form-label">Telefonnummer (obligatoriskt)</span>
            <input type="text" name="phoneNumber" required placeholder="07XXXXXXXX" class="form-input" />
          </label>
        </div>

        <div class="form-questions">
          @foreach (var question in questions)
          {
            <div class="form-group card">
              <label>
                <span class="question-text">@question.Text</span>
                @if (question.Type == QuestionType.ShortText)
                {
                  <input type="text" name="answer[@question.Id]" class="form-input" placeholder="Ditt svar här..." />
                }
                else
                {
                  <textarea name="answer[@question.Id]" class="form-textarea" placeholder="Ditt svar här..."></textarea>
                }
              </label>
            </div>
          }
        </div>

        <div class="form-group card">
          <span class="form-label">Bilagor</span>
          <label class="file-upload-button">
            <input type="file" name="files" multiple class="form-file-hidden" />
            <span class="btn file-upload-text">Välj filer att ladda upp</span>
          </label>
          <p class="form-hint">Du kan ladda upp bilder eller dokument som kan vara relevanta.</p>
        </div>

        <div class="form-actions">
          <button type="submit" class="btn submit-btn">Skicka in svar</button>
        </div>
      </form>
    }
  </div>