templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Home{% endblock %}
  5. {% block body %}
  6.     <div class="container-fluid">
  7.         <div class="row mb-2">
  8.           <div class="col-sm-6">
  9.             <h1 class="m-0 text-dark">Tableau de bord</h1>
  10.           </div><!-- /.col -->
  11.           <div class="col-sm-6">
  12.             <ol class="breadcrumb float-sm-right">
  13.               <li class="breadcrumb-item"><a href="#">Home</a></li>
  14.               <li class="breadcrumb-item active">Tableau de bord</li>
  15.             </ol>
  16.           </div><!-- /.col -->
  17.         </div><!-- /.row -->
  18.       </div><!-- /.container-fluid -->
  20.  <div class="container-fluid">
  21.           <!-- Small boxes (Stat box) -->
  22.           <div class="row">
  23.             <div class="col-lg-3 col-6">
  24.               <!-- small box -->
  25.               <div class="small-box bg-info">
  26.                 <div class="inner">
  27.                   <h3>150</h3>
  29.                   <p>New Orders</p>
  30.                 </div>
  31.                 <div class="icon">
  32.                   <i class="ion ion-bag"></i>
  33.                 </div>
  34.                 <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
  35.               </div>
  36.             </div>
  37.             <!-- ./col -->
  38.             <div class="col-lg-3 col-6">
  39.               <!-- small box -->
  40.               <div class="small-box bg-success">
  41.                 <div class="inner">
  42.                   <h3>53<sup style="font-size: 20px">%</sup></h3>
  44.                   <p>Bounce Rate</p>
  45.                 </div>
  46.                 <div class="icon">
  47.                   <i class="ion ion-stats-bars"></i>
  48.                 </div>
  49.                 <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
  50.               </div>
  51.             </div>
  52.             <!-- ./col -->
  53.             <div class="col-lg-3 col-6">
  54.               <!-- small box -->
  55.               <div class="small-box bg-warning">
  56.                 <div class="inner">
  57.                   <h3>44</h3>
  59.                   <p>User Registrations</p>
  60.                 </div>
  61.                 <div class="icon">
  62.                   <i class="ion ion-person-add"></i>
  63.                 </div>
  64.                 <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
  65.               </div>
  66.             </div>
  67.             <!-- ./col -->
  68.             <div class="col-lg-3 col-6">
  69.               <!-- small box -->
  70.               <div class="small-box bg-danger">
  71.                 <div class="inner">
  72.                   <h3>65</h3>
  74.                   <p>Unique Visitors</p>
  75.                 </div>
  76.                 <div class="icon">
  77.                   <i class="ion ion-pie-graph"></i>
  78.                 </div>
  79.                 <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
  80.               </div>
  81.             </div>
  82.             <!-- ./col -->
  83.           </div>
  84.           <!-- /.row -->
  85.           <!-- Main row -->
  86.           <div class="row">
  87.             <!-- Left col -->
  88.             <section class="col-lg-7 connectedSortable">
  89.               <!-- Custom tabs (Charts with tabs)-->
  90.               <div class="card">
  91.                 <div class="card-header">
  92.                   <h3 class="card-title">
  93.                     <i class="fas fa-chart-pie mr-1"></i>
  94.                     Sales
  95.                   </h3>
  96.                   <div class="card-tools">
  97.                     <ul class="nav nav-pills ml-auto">
  98.                       <li class="nav-item">
  99.                         <a class="nav-link active" href="#revenue-chart" data-toggle="tab">Area</a>
  100.                       </li>
  101.                       <li class="nav-item">
  102.                         <a class="nav-link" href="#sales-chart" data-toggle="tab">Donut</a>
  103.                       </li>
  104.                     </ul>
  105.                   </div>
  106.                 </div><!-- /.card-header -->
  107.                 <div class="card-body">
  108.                   <div class="tab-content p-0">
  109.                     <!-- Morris chart - Sales -->
  110.                     <div class="chart tab-pane active" id="revenue-chart"
  111.                         style="position: relative; height: 300px;">
  112.                         <canvas id="revenue-chart-canvas" height="300" style="height: 300px;"></canvas>                         
  113.                     </div>
  114.                     <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;">
  115.                       <canvas id="sales-chart-canvas" height="300" style="height: 300px;"></canvas>                         
  116.                     </div>  
  117.                   </div>
  118.                 </div><!-- /.card-body -->
  119.               </div>
  120.               <!-- /.card -->
  122.               <!-- DIRECT CHAT -->
  123.               <div class="card direct-chat direct-chat-primary">
  124.                 <div class="card-header">
  125.                   <h3 class="card-title">Direct Chat</h3>
  127.                   <div class="card-tools">
  128.                     <span data-toggle="tooltip" title="3 New Messages" class="badge badge-primary">3</span>
  129.                     <button type="button" class="btn btn-tool" data-card-widget="collapse">
  130.                       <i class="fas fa-minus"></i>
  131.                     </button>
  132.                     <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
  133.                             data-widget="chat-pane-toggle">
  134.                       <i class="fas fa-comments"></i>
  135.                     </button>
  136.                     <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
  137.                     </button>
  138.                   </div>
  139.                 </div>
  140.                 <!-- /.card-header -->
  141.                 <div class="card-body">
  142.                   <!-- Conversations are loaded here -->
  143.                   <div class="direct-chat-messages">
  144.                     <!-- Message. Default to the left -->
  145.                     <div class="direct-chat-msg">
  146.                       <div class="direct-chat-infos clearfix">
  147.                         <span class="direct-chat-name float-left">Alexander Pierce</span>
  148.                         <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
  149.                       </div>
  150.                       <!-- /.direct-chat-infos -->
  151.                       <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
  152.                       <!-- /.direct-chat-img -->
  153.                       <div class="direct-chat-text">
  154.                         Is this template really for free? That's unbelievable!
  155.                       </div>
  156.                       <!-- /.direct-chat-text -->
  157.                     </div>
  158.                     <!-- /.direct-chat-msg -->
  160.                     <!-- Message to the right -->
  161.                     <div class="direct-chat-msg right">
  162.                       <div class="direct-chat-infos clearfix">
  163.                         <span class="direct-chat-name float-right">Sarah Bullock</span>
  164.                         <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
  165.                       </div>
  166.                       <!-- /.direct-chat-infos -->
  167.                       <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
  168.                       <!-- /.direct-chat-img -->
  169.                       <div class="direct-chat-text">
  170.                         You better believe it!
  171.                       </div>
  172.                       <!-- /.direct-chat-text -->
  173.                     </div>
  174.                     <!-- /.direct-chat-msg -->
  176.                     <!-- Message. Default to the left -->
  177.                     <div class="direct-chat-msg">
  178.                       <div class="direct-chat-infos clearfix">
  179.                         <span class="direct-chat-name float-left">Alexander Pierce</span>
  180.                         <span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
  181.                       </div>
  182.                       <!-- /.direct-chat-infos -->
  183.                       <img class="direct-chat-img" src="dist/img/user1-128x128.jpg" alt="message user image">
  184.                       <!-- /.direct-chat-img -->
  185.                       <div class="direct-chat-text">
  186.                         Working with AdminLTE on a great new app! Wanna join?
  187.                       </div>
  188.                       <!-- /.direct-chat-text -->
  189.                     </div>
  190.                     <!-- /.direct-chat-msg -->
  192.                     <!-- Message to the right -->
  193.                     <div class="direct-chat-msg right">
  194.                       <div class="direct-chat-infos clearfix">
  195.                         <span class="direct-chat-name float-right">Sarah Bullock</span>
  196.                         <span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
  197.                       </div>
  198.                       <!-- /.direct-chat-infos -->
  199.                       <img class="direct-chat-img" src="dist/img/user3-128x128.jpg" alt="message user image">
  200.                       <!-- /.direct-chat-img -->
  201.                       <div class="direct-chat-text">
  202.                         I would love to.
  203.                       </div>
  204.                       <!-- /.direct-chat-text -->
  205.                     </div>
  206.                     <!-- /.direct-chat-msg -->
  208.                   </div>
  209.                   <!--/.direct-chat-messages-->
  211.                   <!-- Contacts are loaded here -->
  212.                   <div class="direct-chat-contacts">
  213.                     <ul class="contacts-list">
  214.                       <li>
  215.                         <a href="#">
  216.                           <img class="contacts-list-img" src="dist/img/user1-128x128.jpg">
  218.                           <div class="contacts-list-info">
  219.                             <span class="contacts-list-name">
  220.                               Count Dracula
  221.                               <small class="contacts-list-date float-right">2/28/2015</small>
  222.                             </span>
  223.                             <span class="contacts-list-msg">How have you been? I was...</span>
  224.                           </div>
  225.                           <!-- /.contacts-list-info -->
  226.                         </a>
  227.                       </li>
  228.                       <!-- End Contact Item -->
  229.                       <li>
  230.                         <a href="#">
  231.                           <img class="contacts-list-img" src="dist/img/user7-128x128.jpg">
  233.                           <div class="contacts-list-info">
  234.                             <span class="contacts-list-name">
  235.                               Sarah Doe
  236.                               <small class="contacts-list-date float-right">2/23/2015</small>
  237.                             </span>
  238.                             <span class="contacts-list-msg">I will be waiting for...</span>
  239.                           </div>
  240.                           <!-- /.contacts-list-info -->
  241.                         </a>
  242.                       </li>
  243.                       <!-- End Contact Item -->
  244.                       <li>
  245.                         <a href="#">
  246.                           <img class="contacts-list-img" src="dist/img/user3-128x128.jpg">
  248.                           <div class="contacts-list-info">
  249.                             <span class="contacts-list-name">
  250.                               Nadia Jolie
  251.                               <small class="contacts-list-date float-right">2/20/2015</small>
  252.                             </span>
  253.                             <span class="contacts-list-msg">I'll call you back at...</span>
  254.                           </div>
  255.                           <!-- /.contacts-list-info -->
  256.                         </a>
  257.                       </li>
  258.                       <!-- End Contact Item -->
  259.                       <li>
  260.                         <a href="#">
  261.                           <img class="contacts-list-img" src="dist/img/user5-128x128.jpg">
  263.                           <div class="contacts-list-info">
  264.                             <span class="contacts-list-name">
  265.                               Nora S. Vans
  266.                               <small class="contacts-list-date float-right">2/10/2015</small>
  267.                             </span>
  268.                             <span class="contacts-list-msg">Where is your new...</span>
  269.                           </div>
  270.                           <!-- /.contacts-list-info -->
  271.                         </a>
  272.                       </li>
  273.                       <!-- End Contact Item -->
  274.                       <li>
  275.                         <a href="#">
  276.                           <img class="contacts-list-img" src="dist/img/user6-128x128.jpg">
  278.                           <div class="contacts-list-info">
  279.                             <span class="contacts-list-name">
  280.                               John K.
  281.                               <small class="contacts-list-date float-right">1/27/2015</small>
  282.                             </span>
  283.                             <span class="contacts-list-msg">Can I take a look at...</span>
  284.                           </div>
  285.                           <!-- /.contacts-list-info -->
  286.                         </a>
  287.                       </li>
  288.                       <!-- End Contact Item -->
  289.                       <li>
  290.                         <a href="#">
  291.                           <img class="contacts-list-img" src="dist/img/user8-128x128.jpg">
  293.                           <div class="contacts-list-info">
  294.                             <span class="contacts-list-name">
  295.                               Kenneth M.
  296.                               <small class="contacts-list-date float-right">1/4/2015</small>
  297.                             </span>
  298.                             <span class="contacts-list-msg">Never mind I found...</span>
  299.                           </div>
  300.                           <!-- /.contacts-list-info -->
  301.                         </a>
  302.                       </li>
  303.                       <!-- End Contact Item -->
  304.                     </ul>
  305.                     <!-- /.contacts-list -->
  306.                   </div>
  307.                   <!-- /.direct-chat-pane -->
  308.                 </div>
  309.                 <!-- /.card-body -->
  310.                 <div class="card-footer">
  311.                   <form action="#" method="post">
  312.                     <div class="input-group">
  313.                       <input type="text" name="message" placeholder="Type Message ..." class="form-control">
  314.                       <span class="input-group-append">
  315.                         <button type="button" class="btn btn-primary">Send</button>
  316.                       </span>
  317.                     </div>
  318.                   </form>
  319.                 </div>
  320.                 <!-- /.card-footer-->
  321.               </div>
  322.               <!--/.direct-chat -->
  324.               <!-- TO DO List -->
  325.               <div class="card">
  326.                 <div class="card-header">
  327.                   <h3 class="card-title">
  328.                     <i class="ion ion-clipboard mr-1"></i>
  329.                     To Do List
  330.                   </h3>
  332.                   <div class="card-tools">
  333.                     <ul class="pagination pagination-sm">
  334.                       <li class="page-item"><a href="#" class="page-link">&laquo;</a></li>
  335.                       <li class="page-item"><a href="#" class="page-link">1</a></li>
  336.                       <li class="page-item"><a href="#" class="page-link">2</a></li>
  337.                       <li class="page-item"><a href="#" class="page-link">3</a></li>
  338.                       <li class="page-item"><a href="#" class="page-link">&raquo;</a></li>
  339.                     </ul>
  340.                   </div>
  341.                 </div>
  342.                 <!-- /.card-header -->
  343.                 <div class="card-body">
  344.                   <ul class="todo-list" data-widget="todo-list">
  345.                     <li>
  346.                       <!-- drag handle -->
  347.                       <span class="handle">
  348.                         <i class="fas fa-ellipsis-v"></i>
  349.                         <i class="fas fa-ellipsis-v"></i>
  350.                       </span>
  351.                       <!-- checkbox -->
  352.                       <div  class="icheck-primary d-inline ml-2">
  353.                         <input type="checkbox" value="" name="todo1" id="todoCheck1">
  354.                         <label for="todoCheck1"></label>
  355.                       </div>
  356.                       <!-- todo text -->
  357.                       <span class="text">Design a nice theme</span>
  358.                       <!-- Emphasis label -->
  359.                       <small class="badge badge-danger"><i class="far fa-clock"></i> 2 mins</small>
  360.                       <!-- General tools such as edit or delete-->
  361.                       <div class="tools">
  362.                         <i class="fas fa-edit"></i>
  363.                         <i class="fas fa-trash-o"></i>
  364.                       </div>
  365.                     </li>
  366.                     <li>
  367.                       <span class="handle">
  368.                         <i class="fas fa-ellipsis-v"></i>
  369.                         <i class="fas fa-ellipsis-v"></i>
  370.                       </span>
  371.                       <div  class="icheck-primary d-inline ml-2">
  372.                         <input type="checkbox" value="" name="todo2" id="todoCheck2" checked>
  373.                         <label for="todoCheck2"></label>
  374.                       </div>
  375.                       <span class="text">Make the theme responsive</span>
  376.                       <small class="badge badge-info"><i class="far fa-clock"></i> 4 hours</small>
  377.                       <div class="tools">
  378.                         <i class="fas fa-edit"></i>
  379.                         <i class="fas fa-trash-o"></i>
  380.                       </div>
  381.                     </li>
  382.                     <li>
  383.                       <span class="handle">
  384.                         <i class="fas fa-ellipsis-v"></i>
  385.                         <i class="fas fa-ellipsis-v"></i>
  386.                       </span>
  387.                       <div  class="icheck-primary d-inline ml-2">
  388.                         <input type="checkbox" value="" name="todo3" id="todoCheck3">
  389.                         <label for="todoCheck3"></label>
  390.                       </div>
  391.                       <span class="text">Let theme shine like a star</span>
  392.                       <small class="badge badge-warning"><i class="far fa-clock"></i> 1 day</small>
  393.                       <div class="tools">
  394.                         <i class="fas fa-edit"></i>
  395.                         <i class="fas fa-trash-o"></i>
  396.                       </div>
  397.                     </li>
  398.                     <li>
  399.                       <span class="handle">
  400.                         <i class="fas fa-ellipsis-v"></i>
  401.                         <i class="fas fa-ellipsis-v"></i>
  402.                       </span>
  403.                       <div  class="icheck-primary d-inline ml-2">
  404.                         <input type="checkbox" value="" name="todo4" id="todoCheck4">
  405.                         <label for="todoCheck4"></label>
  406.                       </div>
  407.                       <span class="text">Let theme shine like a star</span>
  408.                       <small class="badge badge-success"><i class="far fa-clock"></i> 3 days</small>
  409.                       <div class="tools">
  410.                         <i class="fas fa-edit"></i>
  411.                         <i class="fas fa-trash-o"></i>
  412.                       </div>
  413.                     </li>
  414.                     <li>
  415.                       <span class="handle">
  416.                         <i class="fas fa-ellipsis-v"></i>
  417.                         <i class="fas fa-ellipsis-v"></i>
  418.                       </span>
  419.                       <div  class="icheck-primary d-inline ml-2">
  420.                         <input type="checkbox" value="" name="todo5" id="todoCheck5">
  421.                         <label for="todoCheck5"></label>
  422.                       </div>
  423.                       <span class="text">Check your messages and notifications</span>
  424.                       <small class="badge badge-primary"><i class="far fa-clock"></i> 1 week</small>
  425.                       <div class="tools">
  426.                         <i class="fas fa-edit"></i>
  427.                         <i class="fas fa-trash-o"></i>
  428.                       </div>
  429.                     </li>
  430.                     <li>
  431.                       <span class="handle">
  432.                         <i class="fas fa-ellipsis-v"></i>
  433.                         <i class="fas fa-ellipsis-v"></i>
  434.                       </span>
  435.                       <div  class="icheck-primary d-inline ml-2">
  436.                         <input type="checkbox" value="" name="todo6" id="todoCheck6">
  437.                         <label for="todoCheck6"></label>
  438.                       </div>
  439.                       <span class="text">Let theme shine like a star</span>
  440.                       <small class="badge badge-secondary"><i class="far fa-clock"></i> 1 month</small>
  441.                       <div class="tools">
  442.                         <i class="fas fa-edit"></i>
  443.                         <i class="fas fa-trash-o"></i>
  444.                       </div>
  445.                     </li>
  446.                   </ul>
  447.                 </div>
  448.                 <!-- /.card-body -->
  449.                 <div class="card-footer clearfix">
  450.                   <button type="button" class="btn btn-info float-right"><i class="fas fa-plus"></i> Add item</button>
  451.                 </div>
  452.               </div>
  453.               <!-- /.card -->
  454.             </section>
  455.             <!-- /.Left col -->
  456.             <!-- right col (We are only adding the ID to make the widgets sortable)-->
  457.             <section class="col-lg-5 connectedSortable">
  459.               <!-- Map card -->
  460.               <div class="card bg-gradient-primary">
  461.                 <div class="card-header border-0">
  462.                   <h3 class="card-title">
  463.                     <i class="fas fa-map-marker-alt mr-1"></i>
  464.                     Visitors
  465.                   </h3>
  466.                   <!-- card tools -->
  467.                   <div class="card-tools">
  468.                     <button type="button"
  469.                             class="btn btn-primary btn-sm daterange"
  470.                             data-toggle="tooltip"
  471.                             title="Date range">
  472.                       <i class="far fa-calendar-alt"></i>
  473.                     </button>
  474.                     <button type="button"
  475.                             class="btn btn-primary btn-sm"
  476.                             data-card-widget="collapse"
  477.                             data-toggle="tooltip"
  478.                             title="Collapse">
  479.                       <i class="fas fa-minus"></i>
  480.                     </button>
  481.                   </div>
  482.                   <!-- /.card-tools -->
  483.                 </div>
  484.                 <div class="card-body">
  485.                   <div id="world-map" style="height: 250px; width: 100%;"></div>
  486.                 </div>
  487.                 <!-- /.card-body-->
  488.                 <div class="card-footer bg-transparent">
  489.                   <div class="row">
  490.                     <div class="col-4 text-center">
  491.                       <div id="sparkline-1"></div>
  492.                       <div class="text-white">Visitors</div>
  493.                     </div>
  494.                     <!-- ./col -->
  495.                     <div class="col-4 text-center">
  496.                       <div id="sparkline-2"></div>
  497.                       <div class="text-white">Online</div>
  498.                     </div>
  499.                     <!-- ./col -->
  500.                     <div class="col-4 text-center">
  501.                       <div id="sparkline-3"></div>
  502.                       <div class="text-white">Sales</div>
  503.                     </div>
  504.                     <!-- ./col -->
  505.                   </div>
  506.                   <!-- /.row -->
  507.                 </div>
  508.               </div>
  509.               <!-- /.card -->
  511.               <!-- solid sales graph -->
  512.               <div class="card bg-gradient-info">
  513.                 <div class="card-header border-0">
  514.                   <h3 class="card-title">
  515.                     <i class="fas fa-th mr-1"></i>
  516.                     Sales Graph
  517.                   </h3>
  519.                   <div class="card-tools">
  520.                     <button type="button" class="btn bg-info btn-sm" data-card-widget="collapse">
  521.                       <i class="fas fa-minus"></i>
  522.                     </button>
  523.                     <button type="button" class="btn bg-info btn-sm" data-card-widget="remove">
  524.                       <i class="fas fa-times"></i>
  525.                     </button>
  526.                   </div>
  527.                 </div>
  528.                 <div class="card-body">
  529.                   <canvas class="chart" id="line-chart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
  530.                 </div>
  531.                 <!-- /.card-body -->
  532.                 <div class="card-footer bg-transparent">
  533.                   <div class="row">
  534.                     <div class="col-4 text-center">
  535.                       <input type="text" class="knob" data-readonly="true" value="20" data-width="60" data-height="60"
  536.                             data-fgColor="#39CCCC">
  538.                       <div class="text-white">Mail-Orders</div>
  539.                     </div>
  540.                     <!-- ./col -->
  541.                     <div class="col-4 text-center">
  542.                       <input type="text" class="knob" data-readonly="true" value="50" data-width="60" data-height="60"
  543.                             data-fgColor="#39CCCC">
  545.                       <div class="text-white">Online</div>
  546.                     </div>
  547.                     <!-- ./col -->
  548.                     <div class="col-4 text-center">
  549.                       <input type="text" class="knob" data-readonly="true" value="30" data-width="60" data-height="60"
  550.                             data-fgColor="#39CCCC">
  552.                       <div class="text-white">In-Store</div>
  553.                     </div>
  554.                     <!-- ./col -->
  555.                   </div>
  556.                   <!-- /.row -->
  557.                 </div>
  558.                 <!-- /.card-footer -->
  559.               </div>
  560.               <!-- /.card -->
  562.               <!-- Calendar -->
  563.               <div class="card bg-gradient-success">
  564.                 <div class="card-header border-0">
  566.                   <h3 class="card-title">
  567.                     <i class="far fa-calendar-alt"></i>
  568.                     Calendar
  569.                   </h3>
  570.                   <!-- tools card -->
  571.                   <div class="card-tools">
  572.                     <!-- button with a dropdown -->
  573.                     <div class="btn-group">
  574.                       <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown">
  575.                         <i class="fas fa-bars"></i></button>
  576.                       <div class="dropdown-menu float-right" role="menu">
  577.                         <a href="#" class="dropdown-item">Add new event</a>
  578.                         <a href="#" class="dropdown-item">Clear events</a>
  579.                         <div class="dropdown-divider"></div>
  580.                         <a href="#" class="dropdown-item">View calendar</a>
  581.                       </div>
  582.                     </div>
  583.                     <button type="button" class="btn btn-success btn-sm" data-card-widget="collapse">
  584.                       <i class="fas fa-minus"></i>
  585.                     </button>
  586.                     <button type="button" class="btn btn-success btn-sm" data-card-widget="remove">
  587.                       <i class="fas fa-times"></i>
  588.                     </button>
  589.                   </div>
  590.                   <!-- /. tools -->
  591.                 </div>
  592.                 <!-- /.card-header -->
  593.                 <div class="card-body pt-0">
  594.                   <!--The calendar -->
  595.                   <div id="calendar" style="width: 100%"></div>
  596.                 </div>
  597.                 <!-- /.card-body -->
  598.               </div>
  599.               <!-- /.card -->
  600.             </section>
  601.             <!-- right col -->
  602.           </div>
  603.           <!-- /.row (main row) -->
  604.         </div><!-- /.container-fluid -->
  605. {% endblock %}