<?php

use Twig\Environment;
use Twig\Error\LoaderError;
use Twig\Error\RuntimeError;
use Twig\Extension\SandboxExtension;
use Twig\Markup;
use Twig\Sandbox\SecurityError;
use Twig\Sandbox\SecurityNotAllowedTagError;
use Twig\Sandbox\SecurityNotAllowedFilterError;
use Twig\Sandbox\SecurityNotAllowedFunctionError;
use Twig\Source;
use Twig\Template;

/* ui-list-group.html.twig */
class __TwigTemplate_f6876dffa83946261ac023cc1cd89a89 extends Template
{
    private $source;
    private $macros = [];

    public function __construct(Environment $env)
    {
        parent::__construct($env);

        $this->source = $this->getSourceContext();

        $this->blocks = [
            'title' => [$this, 'block_title'],
            'pagetitle' => [$this, 'block_pagetitle'],
            'body' => [$this, 'block_body'],
        ];
    }

    protected function doGetParent(array $context)
    {
        // line 1
        return "partials/layout-vertical.html.twig";
    }

    protected function doDisplay(array $context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-list-group.html.twig"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "ui-list-group.html.twig"));

        $this->parent = $this->loadTemplate("partials/layout-vertical.html.twig", "ui-list-group.html.twig", 1);
        $this->parent->display($context, array_merge($this->blocks, $blocks));
        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

    }

    // line 3
    public function block_title($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));

        echo "List Group
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 6
    public function block_pagetitle($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "pagetitle"));

        // line 7
        echo "\t";
        echo twig_include($this->env, $context, "partials/page-title.html.twig", ["sub_title" => "Base UI", "page_title" => "List Group"]);
        echo "
";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    // line 10
    public function block_body($context, array $blocks = [])
    {
        $macros = $this->macros;
        $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));

        // line 11
        echo "\t<div class=\"row\">
\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Basic example</h4>

\t\t\t\t\t<p class=\"text-muted fs-14\">The most basic list group is an unordered list with
\t\t\t\t\t\t                                            list items and the proper classes.
\t\t\t\t\t\t                                            Build upon it with the options that follow, or with your own CSS as needed.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-drive-line me-1\"></i>
\t\t\t\t\t\t\tGoogle Drive</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-messenger-line me-1\"></i>
\t\t\t\t\t\t\tFacebook Messenger</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-apple-line me-1\"></i>
\t\t\t\t\t\t\tApple
\t\t\t\t\t\t\t                                                Technology Company</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-lifebuoy-line me-1\"></i>
\t\t\t\t\t\t\tIntercom
\t\t\t\t\t\t\t                                                Support System</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-paypal-line me-1\"></i>
\t\t\t\t\t\t\tPaypal
\t\t\t\t\t\t\t                                                Payment Gateway</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Active items</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.active</code>
\t\t\t\t\t\tto a
\t\t\t\t\t\t<code>.list-group-item</code>
\t\t\t\t\t\tto indicate the current active selection.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item active\">
\t\t\t\t\t\t\t<i class=\"ri-drive-line me-1\"></i>
\t\t\t\t\t\t\tGoogle Drive</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-messenger-line me-1\"></i>
\t\t\t\t\t\t\tFacebook Messenger</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-apple-line me-1\"></i>
\t\t\t\t\t\t\tApple
\t\t\t\t\t\t\t                                                Technology Company</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-lifebuoy-line me-1\"></i>
\t\t\t\t\t\t\tIntercom
\t\t\t\t\t\t\t                                                Support System</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-paypal-line me-1\"></i>
\t\t\t\t\t\t\tPaypal
\t\t\t\t\t\t\t                                                Payment Gateway</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Disabled items</h4>
\t\t\t\t\t<p>Add
\t\t\t\t\t\t<code>.disabled</code>
\t\t\t\t\t\tto a
\t\t\t\t\t\t<code>.list-group-item</code>
\t\t\t\t\t\tto make it
\t\t\t\t\t\t<em>appear</em>
\t\t\t\t\t\tdisabled.
\t\t\t\t\t</p>
\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item disabled\" aria-disabled=\"true\">
\t\t\t\t\t\t\t<i class=\"ri-drive-line me-1\"></i>
\t\t\t\t\t\t\tGoogle Drive</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-messenger-line me-1\"></i>
\t\t\t\t\t\t\tFacebook Messenger</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-apple-line me-1\"></i>
\t\t\t\t\t\t\tApple
\t\t\t\t\t\t\t                                                Technology Company</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-lifebuoy-line me-1\"></i>
\t\t\t\t\t\t\tIntercom
\t\t\t\t\t\t\t                                                Support System</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-paypal-line me-1\"></i>
\t\t\t\t\t\t\tPaypal
\t\t\t\t\t\t\t                                                Payment Gateway</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Links and Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use
\t\t\t\t\t\t<code>&lt;a&gt;</code>s or
\t\t\t\t\t\t<code>&lt;button&gt;</code>s to create
\t\t\t\t\t\t<em>actionable</em>
\t\t\t\t\t\tlist group items with
\t\t\t\t\t\t                                            hover, disabled, and active states by adding
\t\t\t\t\t\t<code>.list-group-item-action</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"list-group\">
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action active\">
\t\t\t\t\t\t\tPaypal Payment Gateway
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action\">Google
\t\t\t\t\t\t\t                                                Drive</a>
\t\t\t\t\t\t<button type=\"button\" class=\"list-group-item list-group-item-action\">Facebook
\t\t\t\t\t\t\t                                                Messenger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"list-group-item list-group-item-action\">Apple Technology
\t\t\t\t\t\t\t                                                Company</button>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action disabled\" tabindex=\"-1\" aria-disabled=\"true\">Intercom Support System</a>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Flush</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.list-group-flush</code>
\t\t\t\t\t\tto remove some
\t\t\t\t\t\t                                            borders and rounded corners to render list group items edge-to-edge in a parent
\t\t\t\t\t\t                                            container (e.g., cards).</p>

\t\t\t\t\t<ul class=\"list-group list-group-flush\">
\t\t\t\t\t\t<li class=\"list-group-item\">Google Drive</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Facebook Messenger</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Apple Technology Company</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Intercom Support System</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Paypal Payment Gateway</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Horizontal</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.list-group-horizontal</code>
\t\t\t\t\t\tto change the
\t\t\t\t\t\t                                            layout of list group items from vertical to horizontal across all breakpoints.
\t\t\t\t\t\t                                            Alternatively, choose a responsive variant
\t\t\t\t\t\t<code>.list-group-horizontal-{sm|md|lg|xl}</code>
\t\t\t\t\t\tto make a list group
\t\t\t\t\t\t                                            horizontal starting at that breakpoint’s
\t\t\t\t\t\t<code>min-width</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"list-group list-group-horizontal mb-3\">
\t\t\t\t\t\t<li class=\"list-group-item\">Google</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Whatsapp</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Facebook</li>
\t\t\t\t\t</ul>

\t\t\t\t\t<ul class=\"list-group list-group-horizontal-sm mb-3\">
\t\t\t\t\t\t<li class=\"list-group-item\">Apple</li>
\t\t\t\t\t\t<li class=\"list-group-item\">PayPal</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Intercom</li>
\t\t\t\t\t</ul>

\t\t\t\t\t<ul class=\"list-group list-group-horizontal-md\">
\t\t\t\t\t\t<li class=\"list-group-item\">Google</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Whatsapp</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Facebook</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Contextual classes</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use contextual classes to style list items with a
\t\t\t\t\t\t                                            stateful background and color.</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item\">Dapibus ac facilisis in</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-primary\">A simple primary
\t\t\t\t\t\t\t                                                list group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-secondary\">A simple secondary
\t\t\t\t\t\t\t                                                list group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-success\">A simple success
\t\t\t\t\t\t\t                                                list group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-danger\">A simple danger list
\t\t\t\t\t\t\t                                                group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-warning\">A simple warning
\t\t\t\t\t\t\t                                                list group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-info\">A simple info list
\t\t\t\t\t\t\t                                                group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-light\">A simple light list
\t\t\t\t\t\t\t                                                group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-dark\">A simple dark list
\t\t\t\t\t\t\t                                                group item</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Contextual classes with Link</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use contextual classes to style list items with a
\t\t\t\t\t\t                                            stateful background and color.</p>

\t\t\t\t\t<div class=\"list-group\">
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action\">Dapibus ac
\t\t\t\t\t\t\t                                                facilisis in</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-primary\">A
\t\t\t\t\t\t\t                                                simple primary list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-secondary\">A
\t\t\t\t\t\t\t                                                simple secondary list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-success\">A
\t\t\t\t\t\t\t                                                simple success list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-danger\">A
\t\t\t\t\t\t\t                                                simple danger list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-warning\">A
\t\t\t\t\t\t\t                                                simple warning list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-info\">A
\t\t\t\t\t\t\t                                                simple info list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-light\">A
\t\t\t\t\t\t\t                                                simple light list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-dark\">A
\t\t\t\t\t\t\t                                                simple dark list group item</a>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Custom content</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add nearly any HTML within, even for linked list
\t\t\t\t\t\t                                            groups like the one below, with the help of flexbox utilities.</p>

\t\t\t\t\t<div class=\"list-group\">
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action active\">
\t\t\t\t\t\t\t<div class=\"d-flex w-100 justify-content-between\">
\t\t\t\t\t\t\t\t<h5 class=\"mb-1\">List group item heading</h5>
\t\t\t\t\t\t\t\t<small>3 days ago</small>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<p class=\"mb-1\">Donec id elit non mi porta gravida at eget metus.
\t\t\t\t\t\t\t\t                                                    Maecenas sed diam eget risus varius blandit.</p>
\t\t\t\t\t\t\t<small>Donec id elit non mi porta.</small>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action\">
\t\t\t\t\t\t\t<div class=\"d-flex w-100 justify-content-between\">
\t\t\t\t\t\t\t\t<h5 class=\"mb-1\">List group item heading</h5>
\t\t\t\t\t\t\t\t<small class=\"text-muted\">3 days ago</small>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<p class=\"mb-1\">Donec id elit non mi porta gravida at eget metus.
\t\t\t\t\t\t\t\t                                                    Maecenas sed diam eget risus varius blandit.</p>
\t\t\t\t\t\t\t<small class=\"text-muted\">Donec id elit non mi porta.</small>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action\">
\t\t\t\t\t\t\t<div class=\"d-flex w-100 justify-content-between\">
\t\t\t\t\t\t\t\t<h5 class=\"mb-1\">List group item heading</h5>
\t\t\t\t\t\t\t\t<small class=\"text-muted\">3 days ago</small>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<p class=\"mb-1\">Donec id elit non mi porta gravida at eget metus.
\t\t\t\t\t\t\t\t                                                    Maecenas sed diam eget risus varius blandit.</p>
\t\t\t\t\t\t\t<small class=\"text-muted\">Donec id elit non mi porta.</small>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">With badges</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add badges to any list group item to show unread
\t\t\t\t\t\t                                            counts, activity, and more with the help of some utilities.</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tGmail Emails
\t\t\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">14</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tPending Payments
\t\t\t\t\t\t\t<span class=\"badge bg-success rounded-pill\">2</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tAction Needed
\t\t\t\t\t\t\t<span class=\"badge bg-danger rounded-pill\">99+</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tPayments Done
\t\t\t\t\t\t\t<span class=\"badge bg-success rounded-pill\">20+</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tPending Payments
\t\t\t\t\t\t\t<span class=\"badge bg-warning rounded-pill\">12</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Checkboxes and radios</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Place Bootstrap’s checkboxes and radios within list
\t\t\t\t\t\t                                            group items and customize as needed. You can use them without
\t\t\t\t\t\t<code>&lt;label&gt;</code>s, but please remember to include an
\t\t\t\t\t\t<code>aria-label</code>
\t\t\t\t\t\tattribute and value for accessibility.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<input class=\"form-check-input me-1\" type=\"checkbox\" value=\"\" id=\"firstCheckbox\">
\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"firstCheckbox\">First
\t\t\t\t\t\t\t\t                                                    checkbox</label>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<input class=\"form-check-input me-1\" type=\"checkbox\" value=\"\" id=\"secondCheckbox\">
\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"secondCheckbox\">Second
\t\t\t\t\t\t\t\t                                                    checkbox</label>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ul>

\t\t\t\t\t<ul class=\"list-group mt-2\">
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<input class=\"form-check-input me-1\" type=\"radio\" name=\"listGroupRadio\" value=\"\" id=\"firstRadio\" checked>
\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"firstRadio\">First radio</label>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<input class=\"form-check-input me-1\" type=\"radio\" name=\"listGroupRadio\" value=\"\" id=\"secondRadio\">
\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"secondRadio\">Second
\t\t\t\t\t\t\t\t                                                    radio</label>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Numbered</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Numbers are generated by
\t\t\t\t\t\t<code>counter-reset</code>
\t\t\t\t\t\ton
\t\t\t\t\t\t                                            the
\t\t\t\t\t\t<code>&lt;ol&gt;</code>, and then styled and placed with a
\t\t\t\t\t\t<code>::before</code>
\t\t\t\t\t\tpsuedo-element on the
\t\t\t\t\t\t<code>&lt;li&gt;</code>
\t\t\t\t\t\twith
\t\t\t\t\t\t<code>counter-increment</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>content</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<ol class=\"list-group list-group-numbered\">
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-start\">
\t\t\t\t\t\t\t<div class=\"ms-2 me-auto\">
\t\t\t\t\t\t\t\t<div class=\"fw-bold\">Jidox Admin</div>
\t\t\t\t\t\t\t\tJidox Admin
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">865</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-start\">
\t\t\t\t\t\t\t<div class=\"ms-2 me-auto\">
\t\t\t\t\t\t\t\t<div class=\"fw-bold\">Jidox React Admin</div>
\t\t\t\t\t\t\t\tJidox React Admin
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">140</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-start\">
\t\t\t\t\t\t\t<div class=\"ms-2 me-auto\">
\t\t\t\t\t\t\t\t<div class=\"fw-bold\">Angular Version</div>
\t\t\t\t\t\t\t\tAngular Version
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">85</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ol>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

";
        
        $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);

        
        $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);

    }

    public function getTemplateName()
    {
        return "ui-list-group.html.twig";
    }

    public function isTraitable()
    {
        return false;
    }

    public function getDebugInfo()
    {
        return array (  113 => 11,  103 => 10,  90 => 7,  80 => 6,  60 => 3,  37 => 1,);
    }

    public function getSourceContext()
    {
        return new Source("{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}List Group
{% endblock %}

{% block pagetitle %}
\t{{ include('partials/page-title.html.twig', { sub_title: 'Base UI', page_title: 'List Group' }) }}
{% endblock %}

{% block body %}
\t<div class=\"row\">
\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Basic example</h4>

\t\t\t\t\t<p class=\"text-muted fs-14\">The most basic list group is an unordered list with
\t\t\t\t\t\t                                            list items and the proper classes.
\t\t\t\t\t\t                                            Build upon it with the options that follow, or with your own CSS as needed.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-drive-line me-1\"></i>
\t\t\t\t\t\t\tGoogle Drive</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-messenger-line me-1\"></i>
\t\t\t\t\t\t\tFacebook Messenger</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-apple-line me-1\"></i>
\t\t\t\t\t\t\tApple
\t\t\t\t\t\t\t                                                Technology Company</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-lifebuoy-line me-1\"></i>
\t\t\t\t\t\t\tIntercom
\t\t\t\t\t\t\t                                                Support System</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-paypal-line me-1\"></i>
\t\t\t\t\t\t\tPaypal
\t\t\t\t\t\t\t                                                Payment Gateway</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Active items</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.active</code>
\t\t\t\t\t\tto a
\t\t\t\t\t\t<code>.list-group-item</code>
\t\t\t\t\t\tto indicate the current active selection.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item active\">
\t\t\t\t\t\t\t<i class=\"ri-drive-line me-1\"></i>
\t\t\t\t\t\t\tGoogle Drive</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-messenger-line me-1\"></i>
\t\t\t\t\t\t\tFacebook Messenger</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-apple-line me-1\"></i>
\t\t\t\t\t\t\tApple
\t\t\t\t\t\t\t                                                Technology Company</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-lifebuoy-line me-1\"></i>
\t\t\t\t\t\t\tIntercom
\t\t\t\t\t\t\t                                                Support System</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-paypal-line me-1\"></i>
\t\t\t\t\t\t\tPaypal
\t\t\t\t\t\t\t                                                Payment Gateway</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Disabled items</h4>
\t\t\t\t\t<p>Add
\t\t\t\t\t\t<code>.disabled</code>
\t\t\t\t\t\tto a
\t\t\t\t\t\t<code>.list-group-item</code>
\t\t\t\t\t\tto make it
\t\t\t\t\t\t<em>appear</em>
\t\t\t\t\t\tdisabled.
\t\t\t\t\t</p>
\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item disabled\" aria-disabled=\"true\">
\t\t\t\t\t\t\t<i class=\"ri-drive-line me-1\"></i>
\t\t\t\t\t\t\tGoogle Drive</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-messenger-line me-1\"></i>
\t\t\t\t\t\t\tFacebook Messenger</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-apple-line me-1\"></i>
\t\t\t\t\t\t\tApple
\t\t\t\t\t\t\t                                                Technology Company</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-lifebuoy-line me-1\"></i>
\t\t\t\t\t\t\tIntercom
\t\t\t\t\t\t\t                                                Support System</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<i class=\"ri-paypal-line me-1\"></i>
\t\t\t\t\t\t\tPaypal
\t\t\t\t\t\t\t                                                Payment Gateway</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Links and Buttons</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use
\t\t\t\t\t\t<code>&lt;a&gt;</code>s or
\t\t\t\t\t\t<code>&lt;button&gt;</code>s to create
\t\t\t\t\t\t<em>actionable</em>
\t\t\t\t\t\tlist group items with
\t\t\t\t\t\t                                            hover, disabled, and active states by adding
\t\t\t\t\t\t<code>.list-group-item-action</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<div class=\"list-group\">
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action active\">
\t\t\t\t\t\t\tPaypal Payment Gateway
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action\">Google
\t\t\t\t\t\t\t                                                Drive</a>
\t\t\t\t\t\t<button type=\"button\" class=\"list-group-item list-group-item-action\">Facebook
\t\t\t\t\t\t\t                                                Messenger</button>
\t\t\t\t\t\t<button type=\"button\" class=\"list-group-item list-group-item-action\">Apple Technology
\t\t\t\t\t\t\t                                                Company</button>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action disabled\" tabindex=\"-1\" aria-disabled=\"true\">Intercom Support System</a>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Flush</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.list-group-flush</code>
\t\t\t\t\t\tto remove some
\t\t\t\t\t\t                                            borders and rounded corners to render list group items edge-to-edge in a parent
\t\t\t\t\t\t                                            container (e.g., cards).</p>

\t\t\t\t\t<ul class=\"list-group list-group-flush\">
\t\t\t\t\t\t<li class=\"list-group-item\">Google Drive</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Facebook Messenger</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Apple Technology Company</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Intercom Support System</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Paypal Payment Gateway</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Horizontal</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add
\t\t\t\t\t\t<code>.list-group-horizontal</code>
\t\t\t\t\t\tto change the
\t\t\t\t\t\t                                            layout of list group items from vertical to horizontal across all breakpoints.
\t\t\t\t\t\t                                            Alternatively, choose a responsive variant
\t\t\t\t\t\t<code>.list-group-horizontal-{sm|md|lg|xl}</code>
\t\t\t\t\t\tto make a list group
\t\t\t\t\t\t                                            horizontal starting at that breakpoint’s
\t\t\t\t\t\t<code>min-width</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"list-group list-group-horizontal mb-3\">
\t\t\t\t\t\t<li class=\"list-group-item\">Google</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Whatsapp</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Facebook</li>
\t\t\t\t\t</ul>

\t\t\t\t\t<ul class=\"list-group list-group-horizontal-sm mb-3\">
\t\t\t\t\t\t<li class=\"list-group-item\">Apple</li>
\t\t\t\t\t\t<li class=\"list-group-item\">PayPal</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Intercom</li>
\t\t\t\t\t</ul>

\t\t\t\t\t<ul class=\"list-group list-group-horizontal-md\">
\t\t\t\t\t\t<li class=\"list-group-item\">Google</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Whatsapp</li>
\t\t\t\t\t\t<li class=\"list-group-item\">Facebook</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Contextual classes</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use contextual classes to style list items with a
\t\t\t\t\t\t                                            stateful background and color.</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item\">Dapibus ac facilisis in</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-primary\">A simple primary
\t\t\t\t\t\t\t                                                list group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-secondary\">A simple secondary
\t\t\t\t\t\t\t                                                list group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-success\">A simple success
\t\t\t\t\t\t\t                                                list group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-danger\">A simple danger list
\t\t\t\t\t\t\t                                                group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-warning\">A simple warning
\t\t\t\t\t\t\t                                                list group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-info\">A simple info list
\t\t\t\t\t\t\t                                                group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-light\">A simple light list
\t\t\t\t\t\t\t                                                group item</li>
\t\t\t\t\t\t<li class=\"list-group-item list-group-item-dark\">A simple dark list
\t\t\t\t\t\t\t                                                group item</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Contextual classes with Link</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Use contextual classes to style list items with a
\t\t\t\t\t\t                                            stateful background and color.</p>

\t\t\t\t\t<div class=\"list-group\">
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action\">Dapibus ac
\t\t\t\t\t\t\t                                                facilisis in</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-primary\">A
\t\t\t\t\t\t\t                                                simple primary list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-secondary\">A
\t\t\t\t\t\t\t                                                simple secondary list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-success\">A
\t\t\t\t\t\t\t                                                simple success list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-danger\">A
\t\t\t\t\t\t\t                                                simple danger list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-warning\">A
\t\t\t\t\t\t\t                                                simple warning list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-info\">A
\t\t\t\t\t\t\t                                                simple info list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-light\">A
\t\t\t\t\t\t\t                                                simple light list group item</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action list-group-item-dark\">A
\t\t\t\t\t\t\t                                                simple dark list group item</a>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Custom content</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add nearly any HTML within, even for linked list
\t\t\t\t\t\t                                            groups like the one below, with the help of flexbox utilities.</p>

\t\t\t\t\t<div class=\"list-group\">
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action active\">
\t\t\t\t\t\t\t<div class=\"d-flex w-100 justify-content-between\">
\t\t\t\t\t\t\t\t<h5 class=\"mb-1\">List group item heading</h5>
\t\t\t\t\t\t\t\t<small>3 days ago</small>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<p class=\"mb-1\">Donec id elit non mi porta gravida at eget metus.
\t\t\t\t\t\t\t\t                                                    Maecenas sed diam eget risus varius blandit.</p>
\t\t\t\t\t\t\t<small>Donec id elit non mi porta.</small>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action\">
\t\t\t\t\t\t\t<div class=\"d-flex w-100 justify-content-between\">
\t\t\t\t\t\t\t\t<h5 class=\"mb-1\">List group item heading</h5>
\t\t\t\t\t\t\t\t<small class=\"text-muted\">3 days ago</small>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<p class=\"mb-1\">Donec id elit non mi porta gravida at eget metus.
\t\t\t\t\t\t\t\t                                                    Maecenas sed diam eget risus varius blandit.</p>
\t\t\t\t\t\t\t<small class=\"text-muted\">Donec id elit non mi porta.</small>
\t\t\t\t\t\t</a>
\t\t\t\t\t\t<a href=\"#\" class=\"list-group-item list-group-item-action\">
\t\t\t\t\t\t\t<div class=\"d-flex w-100 justify-content-between\">
\t\t\t\t\t\t\t\t<h5 class=\"mb-1\">List group item heading</h5>
\t\t\t\t\t\t\t\t<small class=\"text-muted\">3 days ago</small>
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<p class=\"mb-1\">Donec id elit non mi porta gravida at eget metus.
\t\t\t\t\t\t\t\t                                                    Maecenas sed diam eget risus varius blandit.</p>
\t\t\t\t\t\t\t<small class=\"text-muted\">Donec id elit non mi porta.</small>
\t\t\t\t\t\t</a>
\t\t\t\t\t</div>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t</div>
\t<!-- end row -->

\t<div class=\"row\">
\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">With badges</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Add badges to any list group item to show unread
\t\t\t\t\t\t                                            counts, activity, and more with the help of some utilities.</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tGmail Emails
\t\t\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">14</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tPending Payments
\t\t\t\t\t\t\t<span class=\"badge bg-success rounded-pill\">2</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tAction Needed
\t\t\t\t\t\t\t<span class=\"badge bg-danger rounded-pill\">99+</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tPayments Done
\t\t\t\t\t\t\t<span class=\"badge bg-success rounded-pill\">20+</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-center\">
\t\t\t\t\t\t\tPending Payments
\t\t\t\t\t\t\t<span class=\"badge bg-warning rounded-pill\">12</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Checkboxes and radios</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Place Bootstrap’s checkboxes and radios within list
\t\t\t\t\t\t                                            group items and customize as needed. You can use them without
\t\t\t\t\t\t<code>&lt;label&gt;</code>s, but please remember to include an
\t\t\t\t\t\t<code>aria-label</code>
\t\t\t\t\t\tattribute and value for accessibility.
\t\t\t\t\t</p>

\t\t\t\t\t<ul class=\"list-group\">
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<input class=\"form-check-input me-1\" type=\"checkbox\" value=\"\" id=\"firstCheckbox\">
\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"firstCheckbox\">First
\t\t\t\t\t\t\t\t                                                    checkbox</label>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<input class=\"form-check-input me-1\" type=\"checkbox\" value=\"\" id=\"secondCheckbox\">
\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"secondCheckbox\">Second
\t\t\t\t\t\t\t\t                                                    checkbox</label>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ul>

\t\t\t\t\t<ul class=\"list-group mt-2\">
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<input class=\"form-check-input me-1\" type=\"radio\" name=\"listGroupRadio\" value=\"\" id=\"firstRadio\" checked>
\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"firstRadio\">First radio</label>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item\">
\t\t\t\t\t\t\t<input class=\"form-check-input me-1\" type=\"radio\" name=\"listGroupRadio\" value=\"\" id=\"secondRadio\">
\t\t\t\t\t\t\t<label class=\"form-check-label\" for=\"secondRadio\">Second
\t\t\t\t\t\t\t\t                                                    radio</label>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ul>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->

\t\t<div class=\"col-xl-4\">
\t\t\t<div class=\"card\">
\t\t\t\t<div class=\"card-body\">
\t\t\t\t\t<h4 class=\"header-title\">Numbered</h4>
\t\t\t\t\t<p class=\"text-muted fs-14\">Numbers are generated by
\t\t\t\t\t\t<code>counter-reset</code>
\t\t\t\t\t\ton
\t\t\t\t\t\t                                            the
\t\t\t\t\t\t<code>&lt;ol&gt;</code>, and then styled and placed with a
\t\t\t\t\t\t<code>::before</code>
\t\t\t\t\t\tpsuedo-element on the
\t\t\t\t\t\t<code>&lt;li&gt;</code>
\t\t\t\t\t\twith
\t\t\t\t\t\t<code>counter-increment</code>
\t\t\t\t\t\tand
\t\t\t\t\t\t<code>content</code>.
\t\t\t\t\t</p>

\t\t\t\t\t<ol class=\"list-group list-group-numbered\">
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-start\">
\t\t\t\t\t\t\t<div class=\"ms-2 me-auto\">
\t\t\t\t\t\t\t\t<div class=\"fw-bold\">Jidox Admin</div>
\t\t\t\t\t\t\t\tJidox Admin
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">865</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-start\">
\t\t\t\t\t\t\t<div class=\"ms-2 me-auto\">
\t\t\t\t\t\t\t\t<div class=\"fw-bold\">Jidox React Admin</div>
\t\t\t\t\t\t\t\tJidox React Admin
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">140</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t\t<li class=\"list-group-item d-flex justify-content-between align-items-start\">
\t\t\t\t\t\t\t<div class=\"ms-2 me-auto\">
\t\t\t\t\t\t\t\t<div class=\"fw-bold\">Angular Version</div>
\t\t\t\t\t\t\t\tAngular Version
\t\t\t\t\t\t\t</div>
\t\t\t\t\t\t\t<span class=\"badge bg-primary rounded-pill\">85</span>
\t\t\t\t\t\t</li>
\t\t\t\t\t</ol>
\t\t\t\t</div>
\t\t\t\t<!-- end card-body -->
\t\t\t</div>
\t\t\t<!-- end card-->
\t\t</div>
\t\t<!-- end col -->
\t</div>
\t<!-- end row -->

{% endblock %}", "ui-list-group.html.twig", "/home/ct9/Desktop/Ishan/Jidox/jidox_symfony/templates/ui-list-group.html.twig");
    }
}
