{{-- extend Layout --}}
@extends('layouts.contentLayoutMaster')

{{-- page title --}}
@section('title','Form Editor')

{{-- vendor styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/flag-icon/css/flag-icon.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/katex.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/monokai-sublime.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/quill.snow.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/quill.bubble.css')}}">
@endsection

{{-- page content --}}
@section('content')
<div class="section">
  <!-- Snow Editor start -->
  <section class="snow-editor">
    <div class="row">
      <div class="col s12">
        <div class="card">
          <div class="card-content">
            <h4 class="card-title">Snow Editor</h4>
            <p class="mb-1">Snow is a clean, flat toolbar theme.</p>
            <div class="row">
              <div class="col s12">
                <div id="snow-wrapper">
                  <div id="snow-container">
                    <div class="quill-toolbar">
                      <span class="ql-formats">
                        <select class="ql-header browser-default">
                          <option value="1">Heading</option>
                          <option value="2">Subheading</option>
                          <option selected>Normal</option>
                        </select>
                        <select class="ql-font browser-default">
                          <option selected>Sailec Light</option>
                          <option value="sofia">Sofia Pro</option>
                          <option value="slabo">Slabo 27px</option>
                          <option value="roboto">Roboto Slab</option>
                          <option value="inconsolata">Inconsolata</option>
                          <option value="ubuntu">Ubuntu Mono</option>
                        </select>
                      </span>
                      <span class="ql-formats">
                        <button class="ql-bold"></button>
                        <button class="ql-italic"></button>
                        <button class="ql-underline"></button>
                      </span>
                      <span class="ql-formats">
                        <button class="ql-list" value="ordered"></button>
                        <button class="ql-list" value="bullet"></button>
                      </span>
                      <span class="ql-formats">
                        <button class="ql-link"></button>
                        <button class="ql-image"></button>
                        <button class="ql-video"></button>
                      </span>
                      <span class="ql-formats">
                        <button class="ql-formula"></button>
                        <button class="ql-code-block"></button>
                      </span>
                      <span class="ql-formats">
                        <button class="ql-clean"></button>
                      </span>
                    </div>
                    <div class="editor">
                      <h1 class="ql-align-center">Quill Rich Text Editor</h1>
                      <p><br></p>
                      <p>
                        Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor
                        built for the modern web. With its <a href="http://quilljs.com/docs/modules/">modular
                          architecture</a> and expressive <a href="http://quilljs.com/docs/api/">API</a>, it is
                        completely customizable to fit any need.
                      </p>
                      <p><br></p>
                      <iframe class="ql-video ql-align-center"
                        src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" width="560" height="238">
                      </iframe>
                      <p><br></p>
                      <p><br></p>
                      <h2 class="ql-align-center">Getting Started is Easy</h2>
                      <p><br></p>
                      <pre>
  // &lt;link href="https://cdn.quilljs.com/1.0.5/quill.snow.css" rel="stylesheet"&gt;
	// &lt;script src="https://cdn.quilljs.com/1.0.5/quill.min.js" type="text/javascript"&gt;&lt;/script&gt;
	var quill = new Quill('#editor', {
	modules: {
		toolbar: '#toolbar'
	},
	theme: 'snow'
	});
	// Open your browser's developer console to try out the API!
											</pre>
                      <p><br></p>
                      <p><br></p>
                      <p class="ql-align-center"><strong>Built with</strong></p>
                      <p class="ql-align-center"><span class="ql-formula"
                          data-value="x^2 + (y - \sqrt[3]{x^2})^2 = 1"></span></p>
                      <p><br></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Snow Editor end -->


  <!-- Bubble Editor start -->
  <section class="quill-editor">
    <div class="row">
      <div class="col s12">
        <div class="card">
          <div class="card-content">
            <h4 class="card-title">Bubble Editor</h4>
            <p>
              <code class="language-markup">Bubble</code> is a simple tooltip based theme. Try double clicking on text,
              you should see bubble
              with toolbars for editing.
            </p>
            <div class="row">
              <div class="col s12">
                <div id="bubble-wrapper">
                  <div id="bubble-container">
                    <div class="editor">
                      <h1 class="ql-align-center">Quill Rich Text Editor</h1>
                      <p><br></p>
                      <p>
                        Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor
                        built for the modern web. With its <a href="http://quilljs.com/docs/modules/">modular
                          architecture</a> and expressive <a href="http://quilljs.com/docs/api/">API</a>, it is
                        completely customizable to fit any need.
                      </p>
                      <p><br></p>
                      <iframe class="ql-video ql-align-center"
                        src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" width="560" height="238"></iframe>
                      <p><br></p>
                      <p><br></p>
                      <h2 class="ql-align-center">Getting Started is Easy</h2>
                      <p><br></p>
                      <pre class="language-javascript">
<code class="language-javascript">
    // &lt;link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"&gt;
    // &lt;script src="https://cdn.quilljs.com/1.3.6/quill.min.js" type="text/javascript"&gt;&lt;/script&gt;
    var quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar'
    },
    theme: 'snow'
    });
    // Open your browser's developer console to try out the API!
</code>
</pre>
                      <p><br></p>
                      <p><br></p>
                      <p class="ql-align-center"><strong>Built with</strong></p>
                      <p class="ql-align-center">
                        <span class="ql-formula" data-value="x^2 + (y - \sqrt[3]{x^2})^2 = 1"></span>
                      </p>
                      <p><br></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Bubble Editor end -->

  <!-- full Editor start -->
  <section class="full-editor">
    <div class="row">
      <div class="col s12">
        <div class="card">
          <div class="card-content">
            <h4 class="card-title">Full Editor</h4>
            <p class="mb-1">
              By default all formats are enabled and allowed to exist within a Quill editor and can be configured with
              the <code class="language-markup">formats</code> option. This is separate from adding a control in the
              <code class="language-markup">Toolbar</code>. For
              example, you can configure Quill to allow bolded content to be pasted into an editor that has no bold
              button in the toolbar.
            </p>
            <div class="row">
              <div class="col s12">
                <div id="full-wrapper">
                  <div id="full-container">
                    <div class="editor">
                      <h1 class="ql-align-center">Quill Rich Text Editor</h1>
                      <p><br></p>
                      <p>Quill is a free, <a href="https://github.com/quilljs/quill/">open source</a> WYSIWYG editor
                        built for the modern web. With its <a href="http://quilljs.com/docs/modules/">modular
                          architecture</a> and expressive <a href="http://quilljs.com/docs/api/">API</a>, it is
                        completely customizable to fit any need.</p>
                      <p><br></p>
                      <iframe class="ql-video ql-align-center"
                        src="https://www.youtube.com/embed/QHH3iSeDBLo?showinfo=0" width="560" height="238"></iframe>
                      <p><br></p>
                      <p><br></p>
                      <h2 class="ql-align-center">Getting Started is Easy</h2>
                      <p><br></p>
                      <pre>
  // &lt;link href="https://cdn.quilljs.com/1.0.5/quill.snow.css" rel="stylesheet"&gt;
	// &lt;script src="https://cdn.quilljs.com/1.0.5/quill.min.js" type="text/javascript"&gt;&lt;/script&gt;
	var quill = new Quill('#editor', {
	modules: {
		toolbar: '#toolbar'
	},
	theme: 'snow'
	});
	// Open your browser's developer console to try out the API!
											</pre>
                      <p><br></p>
                      <p><br></p>
                      <p class="ql-align-center"><strong>Built with</strong></p>
                      <p class="ql-align-center"><span class="ql-formula"
                          data-value="x^2 + (y - \sqrt[3]{x^2})^2 = 1"></span></p>
                      <p><br></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- full Editor end -->
</div>
@endsection

{{-- vendor scripts --}}
@section('vendor-script')
<script src="{{asset('vendors/quill/katex.min.js')}}"></script>
<script src="{{asset('vendors/quill/highlight.min.js')}}"></script>
<script src="{{asset('vendors/quill/quill.min.js')}}"></script>
@endsection

{{-- page script --}}
@section('page-script')
<script src="{{asset('js/scripts/form-editor.js')}}"></script>
@endsection