<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css"/>

  <script src="lib/bootstrap.bundle.min.js" defer></script>
  <script src="scripts/boolean-algebra.js" defer></script>

  <script src="index.js" defer></script>
</head>
<body class="py-3, px-2">

  <div class="container mt-3">
    <h3>Math stuffs</h3>
  </div>

  <hr>

  <div class="container">
    <h4>Boolean Algebra Calc</h4>

    <div class="my-2">
      <input type="text" id="bool-alg-input" placeholder="A!B + !(AB)">
    </div>

    <div class="btn-group my-2" role="group">
      <input type="radio" class="btn-check" name="boolalg" id="boolalg1" autocomplete="off" checked>
      <label class="btn btn-outline-primary" for="boolalg1">Algebra</label>
    
      <input type="radio" class="btn-check" name="boolalg" id="boolalg2" autocomplete="off">
      <label class="btn btn-outline-primary" for="boolalg2">Logic</label>
    
      <input type="radio" class="btn-check" name="boolalg" id="boolalg3" autocomplete="off">
      <label class="btn btn-outline-primary" for="boolalg3">Sets</label>
    </div>

<!-- <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div> -->


    <button class="btn btn-primary" id="bool-alg-btn">Go!</button>
  </div>

  <hr>

  <div class="container">
    <h4>Proof by induction</h4>

    <div class="alert alert-danger">
      Fibonacci and Lucas etc. is not supported!
    </div>

    <div class="row">

      <div class="col-3">
        <img src="img/sum.png" alt="Sum from i=? to n+1" width="100%"/>
      </div>

      <div class="col align-self-center">
        <input type="text" id="ind-expr1" class="form-control" placeholder="i^2" min="0">
      </div>
    
    </div>



    <div class="row my-3">

      <div class="col-1 d-flex mx-2">
        <select name="exprsign" id="ind-sign" class="form-select">
          <option value="gt">&gt;</option>
          <option value="geq">&geq;</option>
          <option value="eq" selected>=</option>
          <option value="leq">&leq;</option>
          <option value="lt">&lt;</option>
        </select>
      </div>

      <div class="col">
        <input type="text" id="ind-expr2" class="form-control" placeholder="n(n+1)(2n+1)/2" min="0">
      </div>

    </div>



    <div class="row my-3">

      <div class="col-5 align-self-center">
        <img src="img/i.png" alt="i = " width="100%"/>
      </div>

      <div class="col-3 align-self-center px-0">
        <input type="number" id="ind-s" class="form-control" value="0" min="0">
      </div>

    </div>



    <div class="row">

      <div class="col-3 align-self-center">
        <img src="img/n.png" alt="n" width="100%"/>
      </div>

      <div class="col-2 d-flex">
        <select name="nsign" id="ind-nsign" class="form-select">
          <option value="gt">&gt;</option>
          <option value="geq">&geq;</option>
        </select>
      </div>

      <div class="col">
        <input type="number" id="ind-n" class="form-control" value="0" min="0">
      </div>

    </div>

    <!-- <div class="input-group my-2">
      <input type="text" id="sy" class="form-control" placeholder="y" min="0">
    </div>
    <div class="input-group">
      <input type="number" id="sx" class="form-control" placeholder="x" min="0">
      <input type="number" id="sz" class="form-control" placeholder="z" min="0">
    </div> -->

    <button class="btn btn-primary" id="ind-btn">Go!</button>
  </div>

  <hr>

  <div class="container">
    <h4>Permutations, Combinations</h4>

    <div class="input-group my-2">
      <input type="number" id="pn" class="form-control" placeholder="n" min="0">
      <span class="input-group-text">P</span>
      <input type="number" id="pr" class="form-control" placeholder="r" min="0">
      <button class="btn btn-primary" id="perm-btn">Go!</button>
    </div>

    <div class="input-group my-2">
      <input type="number" id="cn" class="form-control" placeholder="n" min="0">
      <span class="input-group-text">C</span>
      <input type="number" id="cr" class="form-control" placeholder="r" min="0">
      <button class="btn btn-primary" id="comb-btn">Go!</button>
    </div>

  </div>

</body>
</html>