%textarea#text_sourcecode{style: "display:none"}~ @source
.container
  .row
    .col-md-12
      %h2 Live submit

  .row
    .col-md-12
      .alert.alert-info
        Write your code in the following box, choose language, and click submit button when finished
  .row
    .col-md-8
      %div#editor{style: 'height: 500px; border-radius: 7px; font-size: 14px;'}
    .col-md-4
      -# submission form
      .card.mb-3
        .card-header
          Submission
        .card-body
          = form_with url: submit_main_path, :multipart => true, class: 'form' do |form|
            = hidden_field_tag 'editor_text', @source
            = hidden_field_tag 'submission[problem_id]', @problem.id
            .row.mb-2
              .col-md-4
                = form.label "Task", class: 'col-form-label text-secondary'
              .col-md-8
                = form.label nil, "#{@problem.long_name}", class: 'col-form-label fw-bold'
            .row.mb-2
              .col-md-4
                = form.label "Description", class: 'col-form-label text-secondary'
              .col-md-8
                = link_to_description_if_any "[download] <span class='mi'>description</span>".html_safe, @problem
            .row.mb-2
              .col-md-4
                = form.label :language_id, 'Language', class: 'col-form-label text-secondary'
              .col-md-8
                = form.select :language_id, options_from_collection_for_select(Language.all, 'id', 'pretty_name', @lang_id || @current_user.default_language || Language.find_by_pretty_name("Python").id || Language.first.id), {},  class: 'form-select', style: "width: 100px", id: 'language_id'
            .row.mb-2
              .col-12
                = form.file_field :load_file, class: 'form-control', id: 'load_file'
            .row.mb-2
              .col-12
                = submit_tag 'Submit', class: 'btn ' + (@submission && @submission.number >= 100 ? 'golden-btn' : 'btn-success'), id: 'live_submit', 
                  data: {confirm: "Submitting this source code for task #{@problem.long_name}?"}

      -# latest submission status
      .card
        .card-header.text-bg-info.border-info
          Latest Submission Status
          = link_to "Refresh",get_latest_submission_status_submissions_path(@submission.user,@problem), id: 'refresh', class: "btn btn-light btn-sm", remote: true if @submission
        .card-body
          #latest_status

.modal.fade#compiler{tabindex: -1,role: 'dialog'}
  .modal-dialog.modal-lg{role:'document'}
    .modal-content
      .modal-header
        %button.close{type: 'button', data: {dismissed: :modal}, aria: {label: 'close'}}
          %span{aria: {hidden: 'true'}, data: {dismiss: 'modal'}} &times;
        %h4 Compiler message
      .modal-body
        %pre#compiler_msg
          - if @submission
            = @submission.compiler_message
      .modal-footer
        %button.btn.btn-default{type: 'button', data: {dismiss: 'modal'}} Close

:javascript
  $(document).ready(function() {
    var e = ace.edit("editor")
    e.setValue($("#text_sourcecode").val());
    e.gotoLine(1);
    $("#language_id").trigger('change');

    $("#load_file").on('change',function(evt) {
      var file = evt.target.files[0];
      var reader = new FileReader();
      reader.onload =  function(theFile) {
        var e = ace.edit("editor")
        e.setValue(theFile.target.result);
        e.gotoLine(1);
      };
      reader.readAsText(file)
    });

    $("#live_submit").on("click", function(event) {
      $("#editor_text").val(e.getValue());
    });

    $("#language_id").on("change", function(event) {
      text = $("#language_id option:selected").text();
      mode = 'ace/mode/c_cpp';
      switch (text) {
        case 'Pascal':
          mode = 'ace/mode/pascal';
          break;
        case 'C++':
        case 'C':
          mode = 'ace/mode/c_cpp';
          break;
        case 'Ruby':
          mode = 'ace/mode/ruby';
          break;
        case 'Python':
          mode = 'ace/mode/python';
          break;
        case 'Java':
          mode = 'ace/mode/java';
      }
      e.getSession().setMode(mode);
    });

    //brython();
    $('#refresh').click()

  });