<div class="modal-content">
    <div class="modal-header a-modal-header">
        <div class="a-iconText a-iconText-background a-iconText-large">
            <div class="a-iconText-icon">
                <i class="ai ai-send a-icon" aria-hidden="true"></i>
            </div>
            <h1 class="a-iconText-text mb-0">
                 {{# small-modal-title }}<span class="a-iconText-text-small">{{ small-modal-title }}</span>{{/ small-modal-title }}
                <span class="a-iconText-text-large">{{{ header-title }}}</span>
            </h1>
        </div>
    </div>
    <div class="modal-body a-modal-body">

      {{# form }}
        <form data-toggle="validator" id="contactForm">
          {{# removeAlert }}
          <div class="row">
            <div class="col-12">
                {{> felles-komponenter-knapp-ikon }}
            </div>
          </div>
          {{/ removeAlert }}

          {{# description }}
            <p class="mb-4">{{ text }}</p>
          {{/ description }}

          <div class="row">
                
            <div class="col-12 col-lg-8">
            
              {{#alerttype}}
                {{!-- Skal være obligatorisk å velge én --}}
                <label class="an-stackedLabel" for="{{ inputId }}">
                  {{label-text}}
                </label>

                <ul class="nav nav-tabs custom-radio a-radioButtons a-navTabsRadio" role="tablist">
                {{# radiotab-items }}
                <li class="nav-item">
                  <a class="nav-link {{# isChecked }}active{{/ isChecked }} {{# isDisabled }}disabled{{/ isDisabled }}" data-toggle="tab" href="#{{radiotab-id}}" role="tab">
                    <div class="custom-control custom-radio a-custom-radio">
                      <span class="custom-control-label">{{ radiotab-title }} </span>
                    </div>
                  </a>
                </li>
                {{/ radiotab-items }}
              </ul>

                {{# radiotab-panes }}
                <div class="tab-content mb-4">
                  <div class="tab-pane" id="{{radiotab-id}}" role="tabpanel">
                    {{> felles-komponenter-avkrysningsboks }}
                  </div>
                </div>
                {{/ radiotab-panes }}
             
              {{/alerttype}}

              {{# critical-deactivated }}
                <div class="tab-content mb-4">
                {{> felles-komponenter-avkrysningsboks:mb-4 }}
                </div>
              {{/ critical-deactivated }}

              {{#emne}}
              {{!-- Skal være obligatorisk --}}
                {{> felles-komponenter-tekst-input:mb-2 }}
              {{/emne}}
              
              {{#question}}
               {{!-- Skal være obligatorisk --}}
                {{> felles-komponenter-tekstfelt:mb-2 }}
              {{/question}}

              {{#link}}
                {{> felles-komponenter-tekst-input:mb-2 }}
              {{/link}}

              {{#linktext}}
                {{> felles-komponenter-tekst-input:mb-3 }}
              {{/linktext}}

              {{#time-start}}
                {{!-- Skal være obligatorisk å velge én --}}
                <label class="an-stackedLabel" for="{{ inputId }}">
                  {{label-text}}
                </label>

                <ul class="nav nav-tabs custom-radio a-radioButtons a-navTabsRadio mb-0" role="tablist">
                {{# radiotab-items }}
                <li class="nav-item">
                  <a class="nav-link {{# isChecked }}active{{/ isChecked }}" data-toggle="tab" href="#{{radiotab-id}}" role="tab">
                    <div class="custom-control custom-radio a-custom-radio">
                      <span class="custom-control-label">{{ radiotab-title }} </span>
                    </div>
                  </a>
                </li>
                {{/ radiotab-items }}
              </ul>

              <div class="tab-content mb-2">
                {{# radiotab-panes }}
                <div class="tab-pane" id="{{radiotab-id}}" role="tabpanel">
                  {{#date-picker}}
                    {{> felles-komponenter-dato-og-tid}}
                  {{/date-picker}}
                </div>
                {{/ radiotab-panes }}
              </div>
              {{/time-start}}

              {{#time}}
                {{> felles-komponenter-dato-og-tid:mb-2}}
              {{/time}}

              {{#time-end-edit}}
                <label class="an-stackedLabel" for="{{ inputId }}">
                  {{label-text}}
                </label>

                <ul class="nav nav-tabs custom-radio a-radioButtons a-navTabsRadio mb-0" role="tablist">
                {{# radiotab-items }}
                <li class="nav-item">
                  <a class="nav-link {{# isChecked }}active{{/ isChecked }}" data-toggle="tab" href="#{{radiotab-id}}" role="tab">
                    <div class="custom-control custom-radio a-custom-radio">
                      <span class="custom-control-label">{{ radiotab-title }} </span>
                    </div>
                  </a>
                </li>
                {{/ radiotab-items }}
              </ul>

              <div class="tab-content mb-2">
                {{# radiotab-panes }}
                <div class="tab-pane" id="{{radiotab-id}}" role="tabpanel">
                  {{#date-picker}}
                    {{> felles-komponenter-dato-og-tid}}
                  {{/date-picker}}
                </div>
                {{/ radiotab-panes }}
              </div>
              {{/time-end-edit}}
              
              {{#timeend}}
                {{> felles-komponenter-dato-og-tid:mt-1}}
              {{/timeend}}

              {{#canal}}
              <div class="mb-4">
                <label class="an-stackedLabel mt-2 mb-1" for="{{ inputId }}">
                  {{label-text}}
                </label>
                {{> felles-komponenter-avkrysningsboks:mb-2 }}
              </div>
              {{/canal}}

              {{#errorIsSolved}}
              {{> felles-komponenter-avkrysningsboks }}
              {{/errorIsSolved}}

            </div>
            
          </div>

          <div class="row">
            <div class="col-12 col-lg-8">

              {{# whenUpdating }}
              <div {{# alert-id }}id="{{ alert-id }}" {{/ alert-id }}class="a-message a-message-info a-message--arrow-off mt-4 py-2">
                {{> felles-komponenter-avkrysningsboks }}
              </div>
              {{/ whenUpdating }}

            </div>
          </div>

          <div class="row mt-2">
            <div class="col-12 d-flex align-items-baseline">
              <div>
                {{# save }}
                  {{> felles-komponenter-knapp }}
                {{/ save }}
              </div>
              <div class="ml-2">
                {{# avbryt }}
                  {{> felles-komponenter-link }}
                {{/ avbryt }}
              </div>
          </div>
        </div>

        </form>
      {{/ form }} 
</div>
