scinote-web/app/views/assets/wopi/_create_wopi_file_modal.html.erb

<div class="modal"
     id="new-office-file-modal"
     role="dialog"
     tabindex="-1"
     aria-labelledby="new-office-file-modal-label">
    <%= form_with url: create_wopi_file_path(),
                  html: { novalidate: "novalidate" },
                  method: :post, data: { remote: true } do |f| %>
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>

            <h4 class="modal-title" id="new-office-file-modal-label">
              <%= t('assets.create_wopi_file.modal_title') %>
            </h4>
          </div>
          <div class="modal-body">
            <%# Will be filled by the create_file button %>
            <%= hidden_field_tag :element_id, '' %>
            <%= hidden_field_tag :element_type, '' %>

            <div class="form-group">
              <label class="control-label" for="new-wopi-file-name"><%= t('assets.create_wopi_file.text_field_label') %></label>
              <input autofocus="autofocus" required="required" placeholder="<%= t('assets.create_wopi_file.text_field_placeholder') %>" id="new-wopi-file-name" class="form-control" name="file_name" type="text">
              <div class="input-error-message"><%= t('general.text.not_blank') %></div>
            </div>
          <label><%= t('assets.create_wopi_file.type_select_label') %></label>
          <div class="btn-group btn-group-toggle btn-group-justified"
               data-toggle="buttons">
            <label class="btn btn-secondary active" id="word-btn">
              <%= image_tag 'office/ms-word-active.svg', class: 'act' %>
              <%= image_tag 'office/ms-word-inactive.svg', class: 'inactive' %>
              <input type="radio" name="file_type" value='docx' checked>
              <span><%= t('assets.create_wopi_file.ms_word').html_safe %></span>
            </label>
            <label class="btn btn-secondary" id="excel-btn">
              <%= image_tag 'office/ms-excel-active.svg', class: 'act' %>
              <%= image_tag 'office/ms-excel-inactive.svg', class: 'inactive' %>
              <input type="radio" name="file_type" value='xlsx'>
              <span><%= t('assets.create_wopi_file.ms_excel').html_safe %></span>
            </label>
            <label class="btn btn-secondary" id='powerpoint-btn'>
              <%= image_tag 'office/ms-pwrpt-active.svg', class: 'act' %>
              <%= image_tag 'office/ms-pwrpt-inactive.svg', class: 'inactive' %>
              <input type="radio" name="file_type" value='pptx'>
              <span><%= t('assets.create_wopi_file.ms_powerpoint').html_safe %></span>
            </label>
          </div>

          <div class='form-group' id='other-wopi-errors'>
          </div>
          </div>
          <div class="modal-footer">
            <div class='col-md-4'></div>
            <div class='col-md-4' id='submit-btn-cont'>
              <%= f.submit t('assets.create_wopi_file.create_document_button'),
                class: 'btn btn-primary' %>
            </div>
          </div>
        </div>
      </div>
  <% end %>
</div>