<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/global.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}">
    <title>Penulisan Silabel</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="{{ url_for('static', filename='js/loadCanvas.js') }}" defer></script>
  </head>

  <body class="bgcolor">
    <nav class="navbar-float">
        <section class="nav-item mx-auto tsize">
        <a href="/" class="nav-text-active mx-2">TUTORIAL</a>
        <div class="dropdown mx-2">
            <button class="nav-text-active dropdown-toggle" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            BELAJAR
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="huruf-konsonan">Huruf Konsonan</a></li>
            <li><a class="dropdown-item" href="huruf-vokal">Huruf Vokal</a></li>
            <li><a class="dropdown-item" href="penulisan-silabel">Penulisan Silabel</a></li>
            </ul>
        </div>
        <a href="#" class="nav-text-active mx-2">LATIHAN</a>
        </section>
    </nav>

    <!-- Page Content -->
    <div class="content container-fluid">
      <div class="row">
        <!-- KIRI -->
        <div class="col-lg-6">
          <div class="row">
            <canvas id="myCanvas" width="680" height="400" style="border:1px solid black"></canvas>
          </div>
          <div class="row my-3">
            <div class="col-lg-4 col-6 text-center">
              <button type="button" class="button1 tsize" id="deleteButton">Refresh Canvas</button>
            </div>
            <div class="col-lg-4 col-6 text-center">
                <button id="processAndSaveButton" class="button1 tsize">Proses Gambar</button>
            </div>
            <div class="col-lg-4 col-12 pt-2" id="tool">
                <input type="radio" class="form-check-input" id="brush" name="option" value="brush" checked="checked">
                <label class="form-check-label tsize mx-1" for="brush" >Kuas</label>
                <input type="radio" class="form-check-input mx-1" id="eraser" name="option" value="eraser">
                <label class="form-check-label tsize mx-4" for="eraser">Penghapus</label>
            </div>
          </div>
        </div>

        <!-- KANAN -->
        <div class="col-lg-6">
          <div class="row mx-4 mt-3 mb-4 line-red">
            <div class="form-control">
              <h5 class="predict">Romanisasi &nbsp; : &nbsp;&nbsp;<span id="predictedClass"></span></h5>
            </div>
          </div>
          <div class="row">
            <div class="col mt-3">
              <div id="resizedbox">
                <p class="center tsize">Resized Image</p>
                <img class="img box" id="resizedImage" src=""> 
              </div>
            </div>
            <div class="col card-container line-red p-3">
              <p class="bold center p-1">Cara Penggunaan</p>
              <p>1. Arahkan kursor pada canvas hitam. </p>
              <p>2. Tulis satu suku kata <b>di dalam kotak merah</b></p>
              <p>3. Tulis suku kata yang terdiri dari <b>1 Konsonan + 1 Vokal</b></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>