%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
      = form_tag({controller: :main, :action => 'submit'}, :multipart => true, class: 'form') do

        = hidden_field_tag 'editor_text', @source
        = hidden_field_tag 'submission[problem_id]', @problem.id
        .form-group
          = label_tag "Task:"
          = text_field_tag 'asdf', "#{@problem.long_name}", class: 'form-control', disabled: true
        .form-group
          = label_tag "Description:"
          = link_to_description_if_any "[download] <span class='glyphicon glyphicon-file'></span>".html_safe, @problem

        .form-group
          = label_tag 'Language:'
          = select_tag 'language_id', options_from_collection_for_select(Language.all, 'id', 'pretty_name', @lang_id || Language.find_by_pretty_name("Python").id || Language.first.id), class: 'form-control select', style: "width: 100px"
        .form-group
          .input-group
            %span.input-group-btn
              %span.btn.btn-default.btn-file
                Browse
                = file_field_tag 'load_file'
            = text_field_tag '' , nil, {readonly: true, class: 'form-control'}
        .form-group
          = submit_tag 'Submit', class: 'btn btn-success', id: 'live_submit', 
            data: {confirm: "Submitting this source code for task #{@problem.long_name}?"}
      - # latest submission status
      .panel{class: (@submission && @submission.graded_at) ? "panel-info" : "panel-warning"}
        .panel-heading
          Latest Submission Status
          = link_to "Refresh",get_latest_submission_status_submissions_path(@submission.user,@problem), class: "btn btn-default btn-sm", remote: true if @submission
        .panel-body
          %div#latest_status
            - if @submission
              = render :partial => 'submission_short',
                :locals => {submission: @submission, problem_name: @problem.name, problem_id: @problem.id }

- if @submission
  .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= @submission.compiler_message
        .modal-footer
          %button.btn.btn-default{type: 'button', data: {dismiss: 'modal'}} Close

:javascript
  $(document).ready(function() {
    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)
    });

    //brython();
  });