@page
@model AspnetCoreFull.Pages.Forms.EditorsModel
@{
  ViewData["Title"] = "Editors - Forms";
}

@section VendorStyles {
<link rel="stylesheet" href="~/vendor/libs/quill/typography.dist.css" />
<link rel="stylesheet" href="~/vendor/libs/quill/katex.dist.css" />
<link rel="stylesheet" href="~/vendor/libs/quill/editor.dist.css" />
}


@section VendorScripts {
<script src="~/vendor/libs/quill/katex.dist.js"></script>
<script src="~/vendor/libs/quill/quill.dist.js"></script>
}

@section PageScripts {
<script src="~/js/forms-editors.dist.js"></script>
}
@* ************** Content ************** *@

<h4 class="fw-bold py-3 mb-4">
  <span class="text-muted fw-light">Forms /</span> Editors
</h4>

<div class="row">
  <!-- Snow Theme -->
  <div class="col-12">
    <div class="card mb-4">
      <h5 class="card-header">Snow Theme</h5>
      <div class="card-body">
        <div id="snow-toolbar">
          <span class="ql-formats">
            <select class="ql-font"></select>
            <select class="ql-size"></select>
          </span>
          <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
          </span>
          <span class="ql-formats">
            <select class="ql-color"></select>
            <select class="ql-background"></select>
          </span>
          <span class="ql-formats">
            <button class="ql-script" value="sub"></button>
            <button class="ql-script" value="super"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-header" value="1"></button>
            <button class="ql-header" value="2"></button>
            <button class="ql-blockquote"></button>
            <button class="ql-code-block"></button>
          </span>
        </div>
        <div id="snow-editor">
          <h6>Quill Rich Text Editor</h6>
          <p> Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love. </p>
        </div>
      </div>
    </div>
  </div>
  <!-- /Snow Theme -->
  <!-- Bubble Theme -->
  <div class="col-12">
    <div class="card mb-4">
      <h5 class="card-header">Bubble Theme</h5>
      <div class="card-body">
        <div id="bubble-toolbar">
          <span class="ql-formats">
            <select class="ql-font"></select>
            <select class="ql-size"></select>
          </span>
          <span class="ql-formats">
            <button class="ql-bold"></button>
            <button class="ql-italic"></button>
            <button class="ql-underline"></button>
            <button class="ql-strike"></button>
          </span>
          <span class="ql-formats">
            <select class="ql-color"></select>
            <select class="ql-background"></select>
          </span>
          <span class="ql-formats">
            <button class="ql-script" value="sub"></button>
            <button class="ql-script" value="super"></button>
          </span>
          <span class="ql-formats">
            <button class="ql-header" value="1"></button>
            <button class="ql-header" value="2"></button>
            <button class="ql-blockquote"></button>
            <button class="ql-code-block"></button>
          </span>
        </div>
        <div id="bubble-editor">
          <h6>Quill Rich Text Editor</h6>
          <p> Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love. </p>
        </div>
      </div>
    </div>
  </div>
  <!-- /Bubble Theme -->
  <!-- Full Editor -->
  <div class="col-12">
    <div class="card">
      <h5 class="card-header">Full Editor</h5>
      <div class="card-body">
        <div id="full-editor">
          <h6>Quill Rich Text Editor</h6>
          <p> Cupcake ipsum dolor sit amet. Halvah cheesecake chocolate bar gummi bears cupcake. Pie macaroon bear claw. Soufflé I love candy canes I love cotton candy I love. </p>
        </div>
      </div>
    </div>
  </div>
  <!-- /Full Editor -->
</div>