<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ module_title() }}</title>

  {{ shidashi::include_view("header.html") }}

</head>
<body class="{{ shidashi::guess_body_class(body_class()) }}">

<nav class="{{ paste(nav_class(), collapse = ' ') }}">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link fw-semibold">{{ module_title() }}</a>
    </li>
  </ul>
</nav>

<div class="container-fluid py-3">

  <div class="row">
    <div class="col-sm-12">
      <h3 class="shidashi-anchor">Card (Basic)</h3>
      <p>The cards can be used to include inputs, output results. This template
      comes with various themes to choose.</p>
    </div>
    {{ ui_card_basic() }}
  </div>

  <hr/>
  <div class="row">
    <div class="col-sm-12">
      <h3 class="shidashi-anchor">Card (with tools/badges)</h3>
      <p>You can add tool buttons, badges to any card</p>
    </div>
    {{ ui_card_tools() }}
  </div>

  <hr/>
  <div class="row">
    <div class="col-sm-12">
      <h3 class="shidashi-anchor">Card with "B"-Side</h3>
      <p>
        A card with "Back" side can be used to tune the output-specific parameters.
        Click on the <button class="btn btn-secondary btn-sm"><i class="fas fa-ellipsis-v"></i></button> icon to explore!
      </p>
    </div>
    {{ ui_card2() }}
  </div>

  <hr/>
  <div class="row">
    <div class="col-sm-12">
      <h3 class="shidashi-anchor">Sets of Cards</h3>
      <p>When there are simply too many cards...</p>
    </div>
    {{ ui_card_set() }}
  </div>

  <hr/>
  <div class="row">
    <div class="col-sm-12">
      <h3>Server-side Control</h3>
      <p>R functions that can control the cards.</p>
    </div>
    {{ ui_card_controls() }}
  </div>

</div>

{{ shidashi::module_drawer() }}
{{ shidashi::back_top_button("rocket") }}

{{ shidashi::include_view("footer.html") }}
</body>
</html>
