<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.js"
  integrity="sha256-UQey9E6ZZXhvoLNXvVmU5lRSbOcCZe707EBLJTtMwSc=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css"
  integrity="sha256-GGAcbnLrt4/AHq5cP2+2UWetYcNsQNjNMqSRStBoPLQ=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/css/css.min.js"
  integrity="sha256-FM1AMdIH6Zrnz+JGuB5uTB6jxAJ8/XvGvq4HJM0YtDQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/javascript/javascript.min.js"
  integrity="sha256-Zci/fLjT1ALmFze3qSOXnHkYOOpyj5WUHM/Ioy+Bpyo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/mode/htmlmixed/htmlmixed.min.js"
  integrity="sha256-fYwhT0v38tXMnxU+JibUW1drchatADDwdPWvOuxI/yg=" crossorigin="anonymous"></script>

<script>
  setTimeout(function () {
    var myTextArea = document.getElementById("block_input_css");
    var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
    var myTextArea = document.getElementById("block_input_javascript");
    var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
    var myTextArea = document.getElementById("block_input_html");
    var myCodeMirror = CodeMirror.fromTextArea(myTextArea);
    // var myCodeMirror = CodeMirror(function(elt) {
    //   myTextArea.parentNode.replaceChild(elt, myTextArea);
    // }, {
    //     value: myTextArea.value,
    //     mode:  "css"
    //   });
  }, 1)

</script>

<style>
  .form-wrapper form {
    width: 800px;
    max-width: 100%;
    margin: auto;
    text-align: left !important;
    font-size: 1.5em;
  }

  textarea {
    opacity: 0;
  }

  pre {
    overflow: visible !important;
  }

  .CodeMirror {
    border: 2px solid red;
    margin-top: 10px;
    font-size: 14px;
    padding: 2px;
  }
</style>
<div class="form-wrapper">
  <%= form_for(@block) do |f| %>
    <% if @block.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(@block.errors.count, "error") %> prohibited this block from being saved:</h2>

        <ul>
          <% @block.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>
    <style>
      textarea {
        height: 250px;
        width: 600px;
        max-width: 90%;
      }
    </style>
    <%= f.label :input_css %><br />
    <%= f.text_area :input_css %><br />
    <%= f.label :input_javascript %><br />
    <%= f.text_area :input_javascript %><br />
    <%= f.label :input_html %><br />
    <%= f.text_area :input_html %><br />
    <%= f.label :featured %><br />
    <%= f.check_box :featured %><br />
    <%= f.label :index_position %><br />
    <%= f.text_field :index_position %><br />
    <div class="actions">
      <%= f.submit %>
    </div>
  <% end %>
</div>
