<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Material Design for Bootstrap</title>
    <!-- MDB icon -->
    <link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="../../css/mdb.min.css" />
    <!-- PRISM -->
    <link rel="stylesheet" href="../../dev/css/new-prism.css" />
    <!-- Custom styles -->
    <style></style>
  </head>

  <body>
    <div class="container my-5">
      <!-- Navs -->
      <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <!-- Overview tab -->
        <li class="nav-item" role="presentation">
          <a
            class="nav-link active"
            id="pills-overview-tab"
            data-mdb-toggle="pill"
            href="#pills-overview"
            role="tab"
            aria-controls="pills-overview"
            aria-selected="true"
            >Overview</a
          >
        </li>
        <!-- Overview tab -->

        <!-- Api tab -->
        <li class="nav-item" role="presentation">
          <a
            class="nav-link"
            id="pills-api-tab"
            data-mdb-toggle="pill"
            href="#pills-api"
            role="tab"
            aria-controls="pills-api"
            aria-selected="false"
            >API</a
          >
        </li>
        <!-- Api tab -->
      </ul>
      <!-- Navs -->

      <!-- Panels -->
      <div class="tab-content mt-4" id="pills-tabContent">
        <!-- Overview panel -->
        <div
          class="tab-pane fade show active"
          id="pills-overview"
          role="tabpanel"
          aria-labelledby="pills-overview-tab"
        >
          <!--Grid row-->
          <div class="row">
            <!--Grid column-->
            <div class="col-md-10 mb-4">
              <!--Section: Docs content-->
              <section>
                <!--Section: Introduction-->
                <section id="section-introduction">
                  <!-- Main title -->
                  <h2 class="h1 fw-bold">Title</h2>

                  <!-- Seo title -->
                  <h1 class="h5">Subtitle</h1>

                  <!-- Description -->
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui
                    aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem
                    sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.
                  </p>
                </section>
                <!--Section: Introduction-->

                <hr class="my-5" />

                <!--Section: Basic example-->
                <section id="section-basic-example">
                  <!-- Section title -->
                  <h2 class="mb-4">White input</h2>

                  <!--Section: Demo-->
                  <section class="border d-flex justify-content-center p-4 mb-4 bg-dark">
                    <div style="width: 23rem;">
                      <div class="form-outline form-white">
                        <input type="text" id="formWhite" class="form-control" />
                        <label class="form-label" for="formWhite">Example label</label>
                      </div>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <div class="form-outline form-white">
                          <input type="text" id="formWhite" class="form-control" />
                          <label class="form-label" for="formWhite">New label</label>
                        </div>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!-- Section title -->
                  <h2 class="mt-5 mb-4">Basic example</h2>

                  <!--Section: Demo-->
                  <section class="border d-flex justify-content-center p-4 mb-4">
                    <div style="width: 23rem;">
                      <div class="form-outline">
                        <input type="text" id="form1" class="form-control" />
                        <label class="form-label" for="form1">Example label</label>
                      </div>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <div class="form-outline">
                          <input type="text" id="form1" class="form-control" />
                          <label class="form-label" for="form1">Example label</label>
                        </div>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!--Section: Demo-->
                  <section class="border d-flex justify-content-center p-4 mb-4">
                    <div style="width: 23rem;">
                      <div class="form-outline">
                        <input
                          type="text"
                          id="formControlLg"
                          class="form-control form-control-lg"
                        />
                        <label class="form-label" for="formControlLg">Form control lg</label>
                      </div>

                      <br />

                      <div class="form-outline">
                        <input type="text" id="formControlDefault" class="form-control" />
                        <label class="form-label" for="formControlDefault"
                          >Form control default</label
                        >
                      </div>

                      <br />

                      <div class="form-outline">
                        <input
                          type="text"
                          id="formControlSm"
                          class="form-control form-control-sm"
                        />
                        <label class="form-label" for="formControlSm">Form control sm</label>
                      </div>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <div class="form-outline">
                          <input
                            type="text"
                            id="formControlLg"
                            class="form-control form-control-lg"
                          />
                          <label class="form-label" for="formControlLg">Form control lg</label>
                        </div>

                        <div class="form-outline">
                          <input type="text" id="formControlDefault" class="form-control" />
                          <label class="form-label" for="formControlDefault"
                            >Form control default</label
                          >
                        </div>

                        <div class="form-outline">
                          <input
                            type="text"
                            id="formControlSm"
                            class="form-control form-control-sm"
                          />
                          <label class="form-label" for="formControlSm">Form control sm</label>
                        </div>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!--Section: Demo-->
                  <section class="border d-flex justify-content-center p-4 mb-4">
                    <div style="width: 23rem;">
                      <div class="form-outline mb-3">
                        <input
                          type="email"
                          id="formControlExample"
                          class="form-control"
                          placeholder="name@example.com"
                        />
                        <label class="form-label" for="formControlExample">Email address</label>
                      </div>

                      <div class="form-outline mb-3">
                        <input
                          type="email"
                          id="formControlExample2"
                          class="form-control"
                          placeholder="name@example.com"
                        />
                      </div>

                      <div class="form-outline mb-3">
                        <input
                          type="email"
                          id="formControlExample4"
                          value="test"
                          class="form-control"
                          placeholder="name@example.com"
                        />
                      </div>

                      <div class="form-outline mb-3">
                        <textarea
                          type="text"
                          id="formControlTextarea"
                          class="form-control"
                          rows="3"
                          placeholder="name@example.com"
                        ></textarea>
                      </div>

                      <div class="form-outline">
                        <textarea
                          type="text"
                          id="formControlTextarea4"
                          class="form-control"
                          rows="3"
                          placeholder="name@example.com"
                        >
Test</textarea
                        >
                      </div>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <div class="form-outline mb-3">
                          <input
                            type="email"
                            id="formControlExample3"
                            class="form-control"
                            placeholder="name@example.com"
                          />
                          <label class="form-label" for="formControlExample3">Email address</label>
                        </div>

                        <div class="form-outline">
                          <textarea
                            type="text"
                            id="formControlTextarea2"
                            class="form-control"
                            rows="3"
                          ></textarea>
                          <label class="form-label" for="formControlTextarea2"
                            >Example textarea</label
                          >
                        </div>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!--Section: Demo-->
                  <section class="border d-flex justify-content-center p-4 mb-4">
                    <div style="width: 23rem;">
                      <div class="form-outline">
                        <input
                          class="form-control"
                          id="formControlReadonly"
                          type="text"
                          placeholder="Readonly input here..."
                          aria-label="readonly input example"
                          readonly
                        />
                        <label class="form-label" for="formControlReadonly">Readonly</label>
                      </div>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <div class="form-outline">
                          <input
                            class="form-control"
                            id="formControlReadonly"
                            type="text"
                            placeholder="Readonly input here..."
                            aria-label="readonly input example"
                            readonly
                          />
                          <label class="form-label" for="formControlReadonly">Readonly</label>
                        </div>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <h1 class="text-danger mb-4">
                      Ta opcja poniżej u nas nie ma zastosowania bo my nie rozdzielamy labela od
                      inputa
                    </h1>

                    <h2 id="readonly-plain-text">
                      Readonly plain text<a
                        class="anchorjs-link"
                        aria-label="Anchor"
                        data-anchorjs-icon="#"
                        href="#readonly-plain-text"
                        style="padding-left: 0.375em;"
                      ></a>
                    </h2>

                    <p>
                      If you want to have <code>&lt;input readonly&gt;</code> elements in your form
                      styled as plain text, use the <code>.form-control-plaintext</code> class to
                      remove the default form field styling and preserve the correct margin and
                      padding.
                    </p>

                    <div class="mb-3 row">
                      <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
                      <div class="col-sm-10">
                        <input
                          type="text"
                          readonly
                          class="form-control-plaintext"
                          id="staticEmail"
                          value="email@example.com"
                        />
                      </div>
                    </div>
                    <div class="mb-3 row">
                      <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
                      <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword" />
                      </div>
                    </div>

                    <br />

                    <form class="row g-3">
                      <div class="col-auto">
                        <label for="staticEmail2" class="sr-only">Email</label>
                        <input
                          type="text"
                          readonly
                          class="form-control-plaintext"
                          id="staticEmail2"
                          value="email@example.com"
                        />
                      </div>
                      <div class="col-auto">
                        <label for="inputPassword2" class="sr-only">Password</label>
                        <input
                          type="password"
                          class="form-control"
                          id="inputPassword2"
                          placeholder="Password"
                        />
                      </div>
                      <div class="col-auto">
                        <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
                      </div>
                    </form>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <form class="row g-3 d-flex justify-content-center align-items-center">
                      <div class="col-auto">
                        <div class="form-outline">
                          <input
                            type="password"
                            class="form-control"
                            id="inputPassword3"
                            placeholder="Password"
                          />
                          <label class="form-label" for="inputPassword2" class="sr-only"
                            >Password</label
                          >
                        </div>
                      </div>
                      <div class="col-auto">
                        <button type="submit" class="btn btn-primary">Confirm identity</button>
                      </div>
                    </form>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <form class="row g-3 d-flex justify-content-center align-items-center">
                          <div class="col-auto">
                            <div class="form-outline">
                              <input
                                type="password"
                                class="form-control"
                                id="inputPassword2"
                                placeholder="Password"
                              />
                              <label class="form-label" for="inputPassword2" class="sr-only"
                                >Password</label
                              >
                            </div>
                          </div>
                          <div class="col-auto">
                            <button type="submit" class="btn btn-primary">Confirm identity</button>
                          </div>
                        </form>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <h1 class="text-danger mb-4">Czy chcemy coś zrobić z tą opcją?</h1>

                    <label for="exampleColorInput" class="form-label">Color picker</label>
                    <input
                      type="color"
                      class="form-control form-control-color"
                      id="exampleColorInput"
                      value="#563d7c"
                      title="Choose your color"
                    />
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <label for="exampleColorInput" class="form-label">Color picker</label>
                        <input
                          type="color"
                          class="form-control form-control-color"
                          id="exampleColorInput"
                          value="#563d7c"
                          title="Choose your color"
                        />
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!--Section: Demo-->
                  <section class="border d-flex justify-content-center p-4 mb-4">
                    <div style="width: 23rem;">
                      <div class="form-outline">
                        <input
                          class="form-control"
                          list="datalistOptions"
                          id="exampleDataList"
                          placeholder="Type to search..."
                        />
                        <label for="exampleDataList" class="form-label">Datalist example</label>
                        <datalist id="datalistOptions">
                          <option value="San Francisco"></option>
                          <option value="New York"></option>
                          <option value="Seattle"></option>
                          <option value="Los Angeles"></option>
                          <option value="Chicago"></option>
                        </datalist>
                      </div>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <div class="form-outline">
                          <input
                            class="form-control"
                            list="datalistOptions"
                            id="exampleDataList"
                            placeholder="Type to search..."
                          />
                          <label for="exampleDataList" class="form-label">Datalist example</label>
                          <datalist id="datalistOptions">
                            <option value="San Francisco"></option>
                            <option value="New York"></option>
                            <option value="Seattle"></option>
                            <option value="Los Angeles"></option>
                            <option value="Chicago"></option>
                          </datalist>
                        </div>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <form class="row g-3 mb-4">
                      <div class="col-4">
                        <div class="form-outline">
                          <input
                            type="text"
                            class="form-control form-control-lg"
                            id="inputExampleBtn"
                            placeholder="Type sth here..."
                          />
                          <label class="form-label" for="inputExampleBtn"
                            >Form control default size</label
                          >
                        </div>
                      </div>
                      <div class="col-3">
                        <button type="submit" class="btn btn-primary btn-lg">Button</button>
                      </div>
                    </form>

                    <form class="row g-3 mb-4">
                      <div class="col-4">
                        <div class="form-outline">
                          <input
                            type="text"
                            class="form-control"
                            id="inputExampleBtn2"
                            placeholder="Type sth here..."
                          />
                          <label class="form-label" for="inputExampleBtn2"
                            >Form control default size</label
                          >
                        </div>
                      </div>
                      <div class="col-3">
                        <button type="submit" class="btn btn-primary">Button</button>
                      </div>
                    </form>

                    <form class="row g-3">
                      <div class="col-4">
                        <div class="form-outline">
                          <input
                            type="text"
                            class="form-control form-control-sm"
                            id="inputExampleBtn3"
                            placeholder="Type sth here..."
                          />
                          <label class="form-label" for="inputExampleBtn3"
                            >Form control default size</label
                          >
                        </div>
                      </div>
                      <div class="col-3">
                        <button type="submit" class="btn btn-primary btn-sm">Button</button>
                      </div>
                    </form>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <form class="row g-3 mb-4">
                          <div class="col-4">
                            <div class="form-outline">
                              <input
                                type="text"
                                class="form-control form-control-lg"
                                id="inputExampleBtn4"
                                placeholder="Type sth here..."
                              />
                              <label class="form-label" for="inputExampleBtn4"
                                >Form control default size</label
                              >
                            </div>
                          </div>
                          <div class="col-3">
                            <button type="submit" class="btn btn-primary btn-lg">Button</button>
                          </div>
                        </form>

                        <form class="row g-3 mb-4">
                          <div class="col-4">
                            <div class="form-outline">
                              <input
                                type="text"
                                class="form-control"
                                id="inputExampleBtn"
                                placeholder="Type sth here..."
                              />
                              <label class="form-label" for="inputExampleBtn"
                                >Form control default size</label
                              >
                            </div>
                          </div>
                          <div class="col-3">
                            <button type="submit" class="btn btn-primary">Button</button>
                          </div>
                        </form>

                        <form class="row g-3">
                          <div class="col-4">
                            <div class="form-outline">
                              <input
                                type="text"
                                class="form-control form-control-sm"
                                id="inputExampleBtn"
                                placeholder="Type sth here..."
                              />
                              <label class="form-label" for="inputExampleBtn"
                                >Form control default size</label
                              >
                            </div>
                          </div>
                          <div class="col-3">
                            <button type="submit" class="btn btn-primary btn-sm">Button</button>
                          </div>
                        </form>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->

                  <!--Section: Demo-->
                  <section class="border p-4 my-4">
                    <!-- Button trigger modal -->
                    <button
                      type="button"
                      class="btn btn-primary"
                      data-mdb-toggle="modal"
                      data-mdb-target="#exampleModal"
                    >
                      Launch demo modal
                    </button>

                    <!-- Modal -->
                    <div
                      class="modal fade"
                      id="exampleModal"
                      tabindex="-1"
                      aria-labelledby="exampleModalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                            <button
                              type="button"
                              class="close"
                              data-dismiss="modal"
                              aria-label="Close"
                            >
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                            <div class="form-outline mb-3">
                              <input type="text" id="form100" class="form-control" value="Test" />
                              <label class="form-label" for="form100">Example label</label>
                            </div>
                            <div class="form-outline mb-3">
                              <input type="text" id="form101" class="form-control" value="Test2" />
                              <label class="form-label" for="form101">Long Example label</label>
                            </div>
                            <div class="form-outline">
                              <input type="text" id="form102" class="form-control" />
                              <label class="form-label" for="form102">Label</label>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">
                              Close
                            </button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <div class="dropdown">
                      <button
                        class="btn btn-primary dropdown-toggle"
                        type="button"
                        id="dropdownMenuButton"
                        data-mdb-toggle="dropdown"
                        aria-expanded="false"
                      >
                        Dropdown button
                      </button>
                      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                        <li><a class="dropdown-item" href="#">Something here</a></li>
                        <li>
                          <a class="dropdown-item">
                            <div class="form-outline">
                              <input type="text" id="form104" class="form-control" value="Test" />
                              <label class="form-label" for="form104">Example label</label>
                            </div>
                          </a>
                        </li>
                        <li>
                          <a class="dropdown-item">
                            <div class="form-outline">
                              <input type="text" id="form105" class="form-control" value="Test2" />
                              <label class="form-label" for="form105">Long Example label</label>
                            </div>
                          </a>
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Demo-->
                  <div class="card" style="width: 18rem;">
                    <img
                      src="https://mdbootstrap.com/img/Mockups/Lightbox/Thumbnail/img%20(67).jpg"
                      class="card-img-top"
                      alt="..."
                    />
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <div class="form-outline my-3">
                        <input type="text" id="form106" class="form-control" />
                        <label class="form-label" for="form106">Long Example label</label>
                      </div>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>
                  <!--Section: Demo-->

                  <p class="note note-warning mt-4">
                    If any form parent is hidden, after displaying it, update the input to
                    recalculate the width of the label using the following code:
                  </p>
                  <mdbsnippet>
                    <code data-lang="javascript" data-name="JS">
                      document.querySelectorAll('.form-outline').forEach((formOutline) => { new
                      mdb.Input(formOutline).update(); })
                    </code>
                  </mdbsnippet>

                  <h2 class="mt-4">Autofill</h2>
                  <!--Section: Demo-->
                  <form method="post" type="multipart/form-data" onsubmit="check(event)">
                    <div class="form-outline my-3">
                      <input type="email" id="form107" name="email" class="form-control" />
                      <label class="form-label" for="form107">Long Example label</label>
                    </div>
                    <div class="form-outline my-3">
                      <input type="password" id="form108" name="password" class="form-control" />
                      <label class="form-label" for="form108">Long Example label</label>
                    </div>
                    <button class="btn btn-primary">Submit</button>
                  </form>
                  <!--Section: Demo-->

                  <h2 class="mt-4">Input group</h2>
                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <div class="input-group form-outline mb-3">
                      <span class="input-group-text" id="basic-addon1">@</span>
                      <input
                        type="text"
                        class="form-control"
                        id="input1"
                        placeholder="Username"
                        aria-label="Username"
                        aria-describedby="basic-addon1"
                      />
                      <label class="form-label" for="input1">Username</label>
                    </div>

                    <div class="input-group form-outline mb-3">
                      <input
                        type="text"
                        class="form-control"
                        id="input2"
                        placeholder="Recipient's username"
                        aria-label="Recipient's username"
                        aria-describedby="basic-addon2"
                      />
                      <span class="input-group-text" id="basic-addon2">@example.com</span>
                      <label class="form-label" for="input2">Recipient's username</label>
                    </div>

                    <div class="input-group form-outline mb-3">
                      <span class="input-group-text" id="basic-addon3"
                        >https://example.com/users/</span
                      >
                      <input
                        type="text"
                        class="form-control"
                        id="basic-url"
                        aria-describedby="basic-addon3"
                      />
                      <label class="form-label" for="basic-url">Your vanity URL</label>
                    </div>

                    <div class="input-group form-outline mb-3">
                      <span class="input-group-text">$</span>
                      <input
                        type="text"
                        class="form-control"
                        id="input3"
                        aria-label="Amount (to the nearest dollar)"
                      />
                      <span class="input-group-text">.00</span>
                      <label class="form-label" for="input3">Your vanity URL</label>
                    </div>

                    <div class="input-group form-outline">
                      <span class="input-group-text">With textarea</span>
                      <textarea
                        class="form-control"
                        aria-label="With textarea"
                        id="textarea1"
                      ></textarea>
                      <label class="form-label" for="textarea1">Textarea form</label>
                    </div>

                    <div class="form-outline my-3">
                      <input type="email" id="form118" name="email" class="form-control" />
                      <label class="form-label" for="form118">Long Example label</label>
                    </div>
                  </section>
                  <!--Section: Demo-->

                  <h2 class="mt-4">Tabs</h2>
                  <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                      <a
                        class="nav-link active"
                        id="home-tab"
                        data-mdb-toggle="tab"
                        href="#home"
                        role="tab"
                        aria-controls="home"
                        aria-selected="true"
                        >Home</a
                      >
                    </li>
                    <li class="nav-item" role="presentation">
                      <a
                        class="nav-link"
                        id="profile-tab"
                        data-mdb-toggle="tab"
                        href="#profile"
                        role="tab"
                        aria-controls="profile"
                        aria-selected="false"
                        >Profile</a
                      >
                    </li>
                    <li class="nav-item" role="presentation">
                      <a
                        class="nav-link"
                        id="contact-tab"
                        data-mdb-toggle="tab"
                        href="#contact"
                        role="tab"
                        aria-controls="contact"
                        aria-selected="false"
                        >Contact</a
                      >
                    </li>
                  </ul>
                  <div class="tab-content" id="myTabContent">
                    <div
                      class="tab-pane fade show active"
                      id="home"
                      role="tabpanel"
                      aria-labelledby="home-tab"
                    >
                      <div class="form-outline mt-4">
                        <input type="text" id="form120" class="form-control" value="Test" />
                        <label class="form-label" for="form120">Example label</label>
                      </div>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="profile"
                      role="tabpanel"
                      aria-labelledby="profile-tab"
                    >
                      <div class="form-outline mt-4">
                        <input type="text" id="form121" class="form-control" value="Test" />
                        <label class="form-label" for="form121">Example label</label>
                      </div>
                    </div>
                    <div
                      class="tab-pane fade"
                      id="contact"
                      role="tabpanel"
                      aria-labelledby="contact-tab"
                    >
                      <div class="form-outline mt-4">
                        <input type="text" id="form122" class="form-control" value="Test" />
                        <label class="form-label" for="form122">Example label</label>
                      </div>
                    </div>
                  </div>
                </section>
                <!--Section: Basic example-->

                <h2 class="mt-4">Form reset</h2>
                <form id="formReset" style="max-width: 22rem;" class="needs-validation" novalidate>
                  <!-- 2 column grid layout with text inputs for the first and last names -->
                  <div class="row mb-3">
                    <div class="col">
                      <div class="form-outline">
                        <input type="text" id="form3Example1" class="form-control" required />
                        <label class="form-label" for="form3Example1">First name</label>
                        <div class="invalid-feedback">Input can't be empty</div>
                      </div>
                    </div>
                    <div class="col">
                      <div class="form-outline">
                        <input type="text" id="form3Example2" class="form-control" required />
                        <label class="form-label" for="form3Example2">Last name</label>
                        <div class="invalid-feedback">Input can't be empty</div>
                      </div>
                    </div>
                  </div>

                  <!-- Email input -->
                  <div class="form-outline mb-4">
                    <input type="email" id="form3Example3" class="form-control" required />
                    <label class="form-label" for="form3Example3">Email address</label>
                    <div class="invalid-feedback">Input can't be empty</div>
                  </div>

                  <!-- Password input -->
                  <div class="form-outline mb-4">
                    <input type="password" id="form3Example4" class="form-control" required />
                    <label class="form-label" for="form3Example4">Password</label>
                    <div class="invalid-feedback">Input can't be empty</div>
                  </div>

                  <button class="btn btn-danger mt-3 ms-2" id="clear" type="button">
                    Clear form
                  </button>
                </form>

                <!-- Section title -->
                <h2 class="mt-4">Helper text</h2>
                <!--Section: Demo-->
                <section class="border d-flex justify-content-center p-4 mb-4">
                  <div style="width: 23rem">
                    <div class="form-outline">
                      <input type="text" id="form1" class="form-control" />
                      <label class="form-label" for="form1">Example label</label>
                      <div class="form-helper">Example helper</div>
                    </div>
                  </div>
                </section>
                <!--Section: Demo-->
                <!--Section: Demo-->
                <section>
                  <mdbsnippet>
                    <code data-lang="html" data-name="HTML">
                      <div class="form-outline">
                        <input type="text" id="form1" class="form-control" />
                        <label class="form-label" for="form1">Example label</label>
                        <div class="form-helper">Example helper</div>
                      </div>
                    </code>
                  </mdbsnippet>
                </section>
                <!--Section: Demo-->
                <hr class="my-5" />

                <!-- Section title -->
                <h2 class="mt-4">Character counter</h2>
                <!--Section: Demo-->
                <section class="border d-flex justify-content-center p-4 mb-4">
                  <div style="width: 23rem">
                    <div class="form-outline">
                      <input
                        type="text"
                        id="form1"
                        class="form-control"
                        data-mdb-showcounter="true"
                        maxlength="20"
                      />
                      <label class="form-label" for="form1">Example label</label>
                      <div class="form-helper"></div>
                    </div>
                  </div>
                </section>

                <!--Section: Demo-->
                <!--Section: Demo-->
                <section>
                  <mdbsnippet>
                    <code data-lang="html" data-name="HTML">
                      <div class="form-outline">
                        <input
                          type="text"
                          id="form1"
                          class="form-control"
                          data-mdb-showcounter="true"
                          maxlength="20"
                        />
                        <label class="form-label" for="form1">Example label</label>
                        <div class="form-helper"></div>
                      </div>
                    </code>
                  </mdbsnippet>
                </section>
                <!--Section: Demo-->

                <hr class="my-5" />

                <!-- Section title -->
                <h2 class="mt-4">Icons</h2>

                <!-- Section title -->
                <h2 class="mt-4">Trailing icon</h2>
                <!--Section: Demo-->
                <section class="border d-flex justify-content-center p-4 mb-4">
                  <div style="width: 23rem">
                    <div class="form-outline">
                      <i class="fas fa-exclamation-circle trailing"></i>
                      <input type="text" id="form1" class="form-control form-icon-trailing" />
                      <label class="form-label" for="form1">Example label</label>
                    </div>
                  </div>
                </section>

                <!--Section: Demo-->
                <!--Section: Demo-->
                <section>
                  <mdbsnippet>
                    <code data-lang="html" data-name="HTML">
                      <div class="form-outline">
                        <i class="fas fa-exclamation-circle trailing"></i>
                        <input type="text" id="form1" class="form-control form-icon-trailing" />
                        <label class="form-label" for="form1">Example label</label>
                      </div>
                    </code>
                  </mdbsnippet>
                </section>
                <!--Section: Demo-->
              </section>
              <!--Section: Docs content-->
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-2 mb-4">
              <!-- Table of content -->
              <nav id="table-of-content">
                <ul>
                  <li><a href="#section-introduction">Introduction</a></li>
                  <li><a href="#section-basic-example">Basic example</a></li>
                </ul>
              </nav>
              <!-- Table of content -->
            </div>
            <!--Grid column-->
          </div>
          <!--Grid row-->
        </div>
        <!-- Overview panel -->

        <!-- API panel -->
        <div class="tab-pane fade" id="pills-api" role="tabpanel" aria-labelledby="pills-api-tab">
          <!--Grid row-->
          <div class="row">
            <!--Grid column-->
            <div class="col-md-10 mb-4">
              <!--Section: API content-->
              <section>
                <!--Section: Introduction-->
                <section id="section-introduction">
                  <!-- Main title -->
                  <h2 class="h1 fw-bold">Title - API</h2>
                </section>
                <!--Section: Introduction-->

                <hr class="my-5" />

                <!--Section: Usage-->
                <section id="section-usage">
                  <!-- Section title -->
                  <h2 class="mb-4">Usage</h2>

                  <h4 class="mb-4">Via data attributes</h4>

                  <mdbsnippet>
                    <code data-lang="html" data-name="HTML">
                      <button type="button" data-mdb-toggle="modal" data-mdb-target="#myModal">
                        Launch modal
                      </button>
                    </code>
                  </mdbsnippet>

                  <h4 class="my-4">Via JavaScript</h4>

                  <mdbsnippet>
                    <code data-lang="js" data-name="JavaScript">
                      var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
                    </code>
                  </mdbsnippet>
                </section>
                <!--Section: Usage-->

                <hr class="my-5" />

                <!--Section: Options-->
                <section id="section-options">
                  <!-- Section title -->
                  <h2 class="mb-4">Options</h2>

                  <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th class="th-sm">Name</th>
                          <th class="th-sm">Type</th>
                          <th class="th-sm">Default</th>
                          <th class="th-sm">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap"><code class="highlighter-rouge">tag</code></td>
                          <td><i>String</i></td>
                          <td><code>'button'</code></td>
                          <td>Changes button tag</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </section>
                <!--Section: Options-->

                <hr class="my-5" />

                <!--Section: Methods-->
                <section id="section-methods">
                  <!-- Section title -->
                  <h2 class="mb-4">Methods</h2>

                  <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th class="th-sm">Name</th>
                          <th class="th-sm">Description</th>
                          <th class="th-sm">Example</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap"><code class="highlighter-rouge">toggle</code></td>
                          <td>Manually toggles a modal</td>
                          <td><code class="language-markup text-nowrap">myModal.toggle()</code></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </section>
                <!--Section: Methods-->

                <hr class="my-5" />

                <!--Section: Events-->
                <section id="section-events">
                  <!-- Section title -->
                  <h2 class="mb-4">Events</h2>

                  <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th class="th-sm">Name</th>
                          <th class="th-sm">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap">
                            <code class="highlighter-rouge">show.bs.modal</code>
                          </td>
                          <td>
                            This event fires immediately when the show instance method is called. If
                            caused by a click, the clicked element is available as the relatedTarget
                            property of the event.
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </section>
                <!--Section: Events-->
              </section>
              <!--Section: API content-->
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-2 mb-4">
              <!-- Table of content -->
              <nav id="table-of-content">
                <ul>
                  <li><a href="#section-usage">Usage</a></li>
                  <li><a href="#section-options">Options</a></li>
                  <li><a href="#section-methods">Methods</a></li>
                  <li><a href="#section-events">Events</a></li>
                </ul>
              </nav>
              <!-- Table of content -->
            </div>
            <!--Grid column-->
          </div>
          <!--Grid row-->
        </div>
        <!-- API panel -->
      </div>
      <!-- Panels -->
    </div>

    <!-- PRISM -->
    <script type="text/javascript" src="../../dev/js/new-prism.js"></script>
    <!-- MDB SNIPPET -->
    <script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
    <!-- MDB -->
    <script type="text/javascript" src="../../js/mdb.min.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript">
      const check = (e) => {
        e.preventDefault();
        const form = new FormData(e.target);
        const email = form.get('email');
        const password = form.get('password');
        alert(`email: ${email}, password: ${password}`);
      };

      const formReset = document.querySelector('#formReset');
      const clearBtn = document.querySelector('#clear');

      clearBtn.addEventListener('click', () => {
        formReset.reset();
      });
    </script>
  </body>
</html>