<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>
    Principal's Message
  </title>

  {% include 'admin/includes/imports.top.html' %}
</head>

<body class="g-sidenav-show  bg-gray-100">
  {% include 'admin/includes/part.menu.html' %}
  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    {% include 'admin/includes/part.header.html' %}
    <!-- End Navbar -->
    <div class="container-fluid py-4">
      <div class="row g-1">
        <div class="col-md-6">
          <div class="card">
            <div class="card-header pb-0 px-3">
              <h6 class="mb-0">Current Message</h6>
            </div>
            <div class="card-body pt-4 p-3">
              <div>
                <img class="img-fluid" src="{{url_for('static', filename='files')}}/{{message.image}}" alt="Principal's Image">
                <div class="my-3">
                  {{message.message}}
                </div>
                <div>
                  <strong>{{message.name}}</strong>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card">
            <div class="card-header pb-0 px-3">
              <div class="d-flex justify-content-between">
                <h6 class="mb-0">Change Message and Image</h6>
                <button type="submit" form="article" class="btn btn-sm btn-primary my-0">Save</button>
              </div>
            </div>
            <div class="card-body pt-4 p-3">
              <div>
                <form novalidate method="post" id="article" enctype="multipart/form-data">
                  {{form.csrf_token}}
                  <div>
                    {{form.name.label}}
                    {% for error in form.name.errors %}
                    <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                    {% endfor %}
                    {{form.name(class_='form-control')}}

                  </div>
                  <div>
                    {{form.image.label}}
                    {% for error in form.image.errors %}
                    <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                    {% endfor %}
                    {{form.image(class_='form-control')}}

                  </div>
                  <div>
                    {{form.message.label}}
                    {% for error in form.message.errors %}
                    <span class='text-danger text-sm text-gradient'>{{ error }}</span>
                    {% endfor %}
                    {{form.message(class_='form-control article-content', rows='10')}}

                  </div>
                  <button type="submit" form="article" class="btn btn-sm btn-primary my-4">Save</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% include 'admin/includes/part.footer.html' %}
    </div>
  </main>

  <!--   Core JS Files   -->
  {% include 'admin/includes/imports.bottom.html' %}
  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
</body>

</html>