<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.css">

    <style type="text/css">
      .example {
        padding: 1.5em;
        border: .2rem solid #f7f7f9;
        margin-bottom: 3em;
      }
      .toggle {
        margin-top: 1.5em;
      }
      .code {
        margin-top: 1rem;
      }
      .CodeMirror {
        border: 1px solid #eee;
        height: auto;
      }
      .rails-bootstrap-forms-datetime-select select {
        display: inline-block;
        width: auto;
      }
    </style>


    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
  </head>

  <body>
    <div class="container">
      <%= yield %>
    </div>

    <!-- Optional JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/codemirror.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/htmlmixed/htmlmixed.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.33.0/mode/xml/xml.min.js"></script>

    <script type="text/javascript">
      const buttons = document.querySelectorAll('button.toggle');
      const buttonsArray = Array.prototype.slice.call(buttons);
      buttonsArray.forEach(function(elem) {
        elem.addEventListener('click', function() {
          const example = this.closest('.example');
          if (example.querySelector('.code').style.display === "block") {
            example.querySelector('.code').style.display = "none";
          } else {
          example.querySelector('.code').style.display = "block";
          }
          CodeMirror.fromTextArea(example.querySelector('textarea.codemirror'), {
            mode: 'htmlmixed',
            tabSize: 2,
            lineNumbers: true,
            viewportMargin: Infinity,
          });
        });
      });
    </script>
  </body>
</html>
