<!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">

  <h3>Notification</h3>
  <p>
    The notification system supports flexible configurations.
    Try <code class="inline-all">?show_notification</code> for more details.
  </p>
  <div class="row">
    {{ ui_notification() }}
  </div>
  <hr />

  <h3>Progress Bar</h3>
  <p>
    Besides native shiny progress bars, we have the new <code class="inline-all">progressOutput</code>
    allowing your progress bar to be at any desired location.
  </p>
  <div class="row">
    {{ ui_progress() }}
  </div>
  <hr />

  <h3>Info box</h3>
  <p>
    The info box can be used to display statistical snippets,
    track task progress, or show simple documentations.
  </p>
  <div class="row">
    {{ ui_info_box_basic() }}
  </div>
  <hr />

  <h3>Info box (advanced)</h3>
  <div class="row">
    {{ ui_info_box_advanced() }}
  </div>
  <hr />

  <h3>Flip box</h3>
  <div class="row">
    <div class="col-sm-6">
      <p>
        Flip box provides a box that has two sides. There are three ways to trigger the flip box:
      </p>
      <ul>
        <li><code class='inline-all'>active_on="click"</code>: the boxes flip when clicking both the front side and the back side.</li>
        <li><code class='inline-all'>active_on="click-front"</code>: the boxes flip only when clicking the front side and you have to manually flip them back by calling <code class='inline-all'>flip("widget id")</code> in R.</li>
        <li><code class='inline-all'>active_on="manual"</code>: the boxes flip manually via <code class='inline-all'>flip("widget id")</code> in R.</li>
      </ul>
      <p>Here are examples of flip-boxes containing info-boxes.</p>
      <div class="row">
        {{ ui_flip_box() }}
      </div>
    </div>
    <div class="col-sm-6">
      <p>The flip box can be used within card body, with <code>card_tool(widget="flip")</code></p>
      <div class="row">
        {{ ui_flip_card() }}
      </div>
    </div>
  </div>
  <hr />

  <h3>Accordion</h3>
  {{ ui_accordion() }}
  <hr />

  <h3>New Features (v0.3)</h3>
  <p>
    Drawer, header control, URL opener, current module info, and resize handles.
  </p>
  <div class="row">
    {{ ui_new_features() }}
  </div>
  <hr />

</div>

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

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