<div data-ng-if="selectable_contexts.length && !submission.context" data-ng-include="'views/whistleblower/context_selection.html'"></div>
<div data-ng-if="submission.context">
  <div data-ng-if="selectable_contexts.length > 1 || context_id">
    <div class="title">{{submission.context.name}}</div>
    <div class="row">
      <div class="col-md-2" data-ng-if="submission.context.picture"><img class="contextImg" alt="context picture" data-ng-src="/s/{{submission.context.id}}" /></div>
    </div>
  </div>
  <form id="SubmissionForm" name="vars.submissionForm" autocomplete="off" novalidate data-ng-class="{'was-validated': displayErrors()}">
    <div class="tabbable tabs-below">
      <ul id="SubmissionTabsNavigationBox" class="nav nav-tabs" data-ng-if="submission.context.show_steps_navigation_interface && submission.context.questionnaire.steps.length > 1">
        <li data-ng-if="submission.context.allow_recipients_selection" class="nav-item">
          <a id="receiver-selection-link" data-ng-class="{active: navigation === -1}" class="nav-link" data-ng-click="goToStep(-1)">
            <span class="StepIndex" data-ng-class="{'StepIndexSelected': navigation === -1}">1</span> <span class="StepLabel" data-translate>Recipient selection</span>
          </a>
        </li>
        <li data-ng-repeat="step in submission.context.questionnaire.steps | orderBy:'order'" data-ng-if="step.enabled" class="nav-item">
          <a id="step-{{$index}}-link" data-ng-class="{active: navigation === $index}" class="nav-link" data-ng-click="goToStep($index)">
            <span class="StepIndex" data-ng-class="{'StepIndexSelected': navigation === $index}">{{$index + (submission.context.allow_recipients_selection ? 2 : 1)}}</span> <span class="StepLabel">{{step.label}}</span>
          </a>
        </li>
      </ul>
      <div id="SubmissionTabsContentBox" class="tab-content">
        <div data-ng-if="displayErrors()" data-ng-include="'views/whistleblower/submission_error.html'"></div>
        <div id="step-receiver-selection" data-ng-if="submission.context.allow_recipients_selection">
          <div data-ng-show="navigation === -1" data-ng-include="'views/whistleblower/receiver_selection.html'"></div>
        </div>
        <div data-ng-show="navigation !== -1" data-ng-repeat="step in submission.context.questionnaire.steps | orderBy:'order'" data-ng-controller="SubmissionStepCtrl" data-ng-if="step.enabled">
          <div id="{{stepId}}" data-ng-form="{{stepId}}" class="SubmissionStep" data-ng-show="navigation === $index">
            <div data-ng-if="step.description" class="description" data-markdown-to-html="step.description | stripHtml"></div>
            <div data-ng-include="'views/whistleblower/form.html'"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="SubmissionButtons">
      <button id="PreviousStepButton" class="btn btn-outline-secondary" data-ng-show="hasPreviousStep()" data-ng-click="decrementStep()">
        <i class="fa-solid fa-arrow-circle-left"></i>
        <span data-translate>Previous</span>
      </button>

      <button id="NextStepButton" class="btn btn-outline-secondary" data-ng-show="hasNextStep()" data-ng-disabled="submission.blocked" data-ng-click="incrementStep()">
        <span data-translate>Next</span>
        <i class="fa-solid fa-arrow-circle-right"></i>
      </button>
      <div data-ng-show="!hasNextStep() && done" data-ng-include="'views/partials/rfiles_upload_status.html'"></div>
      <button id="SubmitButton" class="btn btn-primary" data-ng-show="!hasNextStep()" data-ng-click="completeSubmission()" data-ng-disabled="!Authentication.session || submission.blocked || done" type="submit" data-translate>Submit</button>
    </div>
  </form>
</div>
