@*******************************************************************************************************
//  SelectTheme.cshtml - Gbtc
//
//  Copyright © 2016, Grid Protection Alliance.  All Rights Reserved.
//
//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
//  file except in compliance with the License. You may obtain a copy of the License at:
//
//      http://opensource.org/licenses/MIT
//
//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
//  License for the specific language governing permissions and limitations.
//
//  Code Modification History:
//  ----------------------------------------------------------------------------------------------------
//  01/22/2016 - J. Ritchie Carroll
//       Generated original version of source code.
//
//*****************************************************************************************************@
@using System
@using System.Collections.Generic
@using System.Collections.Specialized
@using System.Linq
@using System.Net.Http
@using GSF
@using GSF.Configuration
@using GSF.IO
@using GSF.Web
@using GSF.Web.Model
@using GSF.Web.Hosting
@using GSF.Web.Shared
@inherits ExtendedTemplateBase
@{
    ViewBag.Title = "Select Theme";

    HttpRequestMessage request = ViewBag.Request;
    string selectedTheme = null;

    if (ViewBag.IsPost)
    {
        PostData postData = request.GetPostData();
        selectedTheme = postData.FormData["selectedTheme"];
    }

    string currentTheme = FilePath.GetFileName(ViewBag.Model.Global.BootstrapTheme).Trim();
    string[] fileList = FilePath.GetFileList(string.Format("{0}Content/bootstrap-theme-*.css", FilePath.AddPathSuffix(WebServer.Default.Options.WebRootPath))).Select(fileName => FilePath.GetFileName(fileName).Trim()).ToArray();

    if (string.IsNullOrWhiteSpace(selectedTheme)) {
        selectedTheme = currentTheme;
    }
    else {
        CategorizedSettingsElementCollection systemSettings = ConfigurationFile.Current.Settings["systemSettings"];
        systemSettings["BootstrapTheme"].Value = "Content/" + selectedTheme;
        ViewBag.Model.Global.BootstrapTheme = systemSettings["BootstrapTheme"].Value;
        ConfigurationFile.Current.Save();
    }
}
@section StyleSheets{}
@section Scripts{}
@{
    ViewBag.StyleSheetsSection = RenderSection("StyleSheets").ToString();
    ViewBag.ScriptsSection = RenderSection("Scripts").ToString();
}
<div class="well">
    <form role="form" method="post">
        <div class="form-group">
            <label for="selectBootstrapTheme">Selected Bootstrap Theme:</label>
            <select class="form-control" id="selectBootstrapTheme" name="selectedTheme">
                <option value="bootstrap-theme.css"@(string.Compare(selectedTheme, "bootstrap-theme.css", StringComparison.OrdinalIgnoreCase) == 0 ? " selected" : "")>Default Bootstrap Theme</option>
                @foreach (string theme in fileList) {
                    <option value="@theme"@(string.Compare(selectedTheme, theme, StringComparison.OrdinalIgnoreCase) == 0 ? " selected" : "")>@(FilePath.GetFileNameWithoutExtension(theme).Substring(16).ToTitleCase())</option>
                }
            </select>
            <br />
            <button type="submit" class="btn btn-primary pull-right">Apply</button>
            <br />
        </div>
        @Html.RequestVerificationToken()
    </form>
</div>
<h3><em>Selected Theme Element Rendering Preview:</em></h3>
<div class="navbar navbar-static-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">CSS <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#headings">Headings</a></li>
                    <li><a href="#content-formatting">Content</a></li>
                    <li><a href="#tables">Tables</a></li>
                    <li><a href="#forms">Forms</a></li>
                    <li><a href="#images">Images</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Components <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#dropdowns">Dropdowns</a></li>
                    <li><a href="#input-groups">Input Groups</a></li>
                    <li><a href="#navs">Navs</a></li>
                    <li><a href="#navbar">Navbar</a></li>
                    <li><a href="#pagination">Pagination</a></li>
                    <li><a href="#alerts">Alerts</a></li>
                    <li><a href="#labels">Labels</a></li>
                    <li><a href="#progress">Progress</a></li>
                    <li><a href="#media-object">Media Object</a></li>
                    <li><a href="#list-groups">List Groups</a></li>
                    <li><a href="#panels">Panels</a></li>
                    <li><a href="#wells">Wells</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default" id="headings">
                <div class="panel-heading">
                    Headings
                </div>
                <h1 class="page-header">Page Header <small>With Small Text</small></h1>
                <h1>This is an h1 heading</h1>
                <h2>This is an h2 heading</h2>
                <h3>This is an h3 heading</h3>
                <h4>This is an h4 heading</h4>
                <h5>This is an h5 heading</h5>
                <h6>This is an h6 heading</h6>
            </div>
            <div class="panel panel-default" id="tables">
                <div class="panel-heading">
                    Tables
                </div>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Tables</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Michael</td>
                            <td>Are formatted like this</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Lucille</td>
                            <td>Do you like them?</td>
                        </tr>
                        <tr class="success">
                            <td>3</td>
                            <td>Success</td>
                            <td></td>
                        </tr>
                        <tr class="danger">
                            <td>4</td>
                            <td>Danger</td>
                            <td></td>
                        </tr>
                        <tr class="warning">
                            <td>5</td>
                            <td>Warning</td>
                            <td></td>
                        </tr>
                        <tr class="active">
                            <td>6</td>
                            <td>Active</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
                <table class="table table-striped table-bordered table-condensed">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Tables</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Michael</td>
                            <td>This one is bordered and condensed</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Lucille</td>
                            <td>Do you still like it?</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default" id="content-formatting">
                <div class="panel-heading">
                    Content Formatting
                </div>
                <p class="lead">This is a lead paragraph.</p>
                <p>This is an <b>ordinary paragraph</b> that is <i>long enough</i> to wrap to <u>multiple lines</u> so that you can see how the line spacing looks.</p>
                <p class="text-muted">Muted color paragraph.</p>
                <p class="text-warning">Warning color paragraph.</p>
                <p class="text-danger">Danger color paragraph.</p>
                <p class="text-info">Info color paragraph.</p>
                <p class="text-success">Success color paragraph.</p>
                <p><small>This is text in a <code>small</code> wrapper. <abbr title="No Big Deal">NBD</abbr>, right?</small></p>
                <hr>
                <div class="row">
                    <address class="col-6">                <strong>Twitter, Inc.</strong><br>                795 Folsom Ave, Suite 600<br>                San Francisco, CA 94107<br>                <abbr title="Phone">P:</abbr> (123) 456-7890              </address><address class="col-6">                <strong>Full Name</strong><br>                <a href="mailto:#">first.last@example.com</a>              </address>
                </div>
                <hr>
                <blockquote>
                    Here's what a blockquote looks like in Bootstrap. <small>Use <code>small</code> to identify the source.</small>
                </blockquote>
                <hr>
                <div class="row">
                    <div class="col-6">
                        <ul>
                            <li>Normal Unordered List</li>
                            <li>
                                Can Also Work
                                <ul>
                                    <li>With Nested Children</li>
                                </ul>
                            </li>
                            <li>Adds Bullets to Page</li>
                        </ul>
                    </div>
                    <div class="col-6">
                        <ol>
                            <li>Normal Ordered List</li>
                            <li>
                                Can Also Work
                                <ol>
                                    <li>With Nested Children</li>
                                </ol>
                            </li>
                            <li>Adds Bullets to Page</li>
                        </ol>
                    </div>
                </div>
                <hr>
                <pre>function preFormatting() {  // looks like this;  var something = somethingElse;  return true;}</pre>
            </div>
        </div>
    </div>
    <div class="panel panel-default" id="forms">
        <div class="panel-heading">
            Forms
        </div>
        <form>
            <fieldset>
                <legend>Legend</legend>
                <div class="form-group">
                    <label for="exampleInputEmail">Email address</label>
                    <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
                </div>
                <div class="form-group">
                    <label for="exampleInputFile">File input</label>
                    <input type="file" id="exampleInputFile">
                    <p class="help-block">Example block-level help text here.</p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox">Check me out
                    </label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </fieldset>
        </form>
        <hr>
        <form class="form-inline">
            <input type="text" class="form-control" placeholder="Email" style="width: 200px;">
            <input type="password" class="form-control" placeholder="Password" style="width: 200px;">
            <div class="checkbox">
                <label>
                    <input type="checkbox">Remember me
                </label>
            </div>
            <button type="submit" class="btn btn-default">Sign in</button>
        </form>
        <hr>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group has-warning">
                <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group has-error">
                <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group has-success">
                <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-lg-2 control-label">Password</label>
                <div class="col-lg-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox">Remember me
                        </label>
                    </div>
                    <button type="submit" class="btn btn-default">Sign in</button>
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default" id="buttons">
                <div class="panel-heading">
                    Buttons
                </div>
                <p>
                    <!-- Standard gray button with gradient -->
                    <button type="button" class="btn btn-default">Default</button>
                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn btn-primary">Primary</button>
                    <!-- Indicates a successful or positive action -->
                    <button type="button" class="btn btn-success">Success</button>
                    <!-- Contextual button for informational alert messages -->
                    <button type="button" class="btn btn-info">Info</button>
                    <!-- Indicates caution should be taken with this action -->
                    <button type="button" class="btn btn-warning">Warning</button>
                    <!-- Indicates a dangerous or potentially negative action -->
                    <button type="button" class="btn btn-danger">Danger</button>
                    <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
                    <button type="button" class="btn btn-link">Link</button>
                </p>
                <p>
                    <button type="button" class="btn btn-primary btn-large">Large button</button>
                    <button type="button" class="btn btn-primary disabled">Disabled</button>
                    <button type="button" class="btn btn-primary">Default button</button>
                    <button type="button" class="btn btn-primary btn-small">Small button</button>
                    <button type="button" class="btn btn-primary btn-mini">Mini button</button>
                </p>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default" id="images">
                <div class="panel-heading">
                    Images
                </div>
                <p>
                    <img src="http://placehold.it/120x100" class="img-rounded">
                    <img src="http://placehold.it/120x100" class="img-circle">
                    <img src="http://placehold.it/120x100" class="img-thumbnail">
                </p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <div class="panel panel-default clearfix" id="dropdowns">
                <div class="panel-heading">
                    Dropdowns
                </div>
                <p></p>
                <div class="dropdown">
                    <!-- Link or button to toggle dropdown -->
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static;">
                        <li class="dropdown-header">Dropdown header</li>
                        <li class="disabled">
                            <a tabindex="-1" href="#">Action</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">Another action</a>
                        </li>
                        <li>
                            <a tabindex="-1" href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a tabindex="-1" href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
                <p></p>
            </div>
        </div>
        <div class="col-lg-9">
            <div class="panel panel-default" id="input-groups">
                <div class="panel-heading">
                    Input Groups
                </div>
                <p></p>
                <div class="input-group">
                    <span class="input-group-btn">                <button class="btn btn-default" type="button">Go!</button>              </span><input type="text" class="form-control" placeholder="Username">
                </div>
                <p></p>
                <p></p>
                <div class="input-group">
                    <input type="text" class="form-control input-large">
                    <span class="input-group-addon input-large">.00</span>
                </div>
                <p></p>
                <p></p>
                <div class="input-group">
                    <span class="input-group-addon">$</span><input type="text" class="form-control">
                    <span class="input-group-addon">.00</span>
                </div>
                <p></p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default" id="navs">
                <div class="panel-heading">
                    Navs
                </div>
                <p></p>
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
                <p></p>
                <p></p>
                <ul class="nav nav-pills">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
                <p></p>
                <p></p>
                <ul class="nav nav-stacked nav-pills">
                    <li class="active">
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
                <p></p>
            </div>
        </div>
        <div class="col-lg-6" id="navbar">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Navbar
                </div>
                <p></p>
                <div class="navbar">
                    <a href="#" class="navbar-brand">Your Company</a>
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <div class="navbar navbar-inverse">
                    <a href="#" class="navbar-brand">Your Company</a>
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">About</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </div>
                <div class="navbar">
                    <a class="btn btn-primary navbar-btn">Navbar Button</a>
                    <p class="navbar-text pull-right">Navbar Text</p>
                </div>
                <p></p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default" id="pagination">
                <div class="panel-heading">
                    Pagination
                </div>
                <ul class="pagination" style="margin-right: 10px;">
                    <li>
                        <a href="#">Prev</a>
                    </li>
                    <li>
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">Next</a>
                    </li>
                </ul>
                <ul class="pagination pagination-large">
                    <li>
                        <a href="#">Prev</a>
                    </li>
                    <li>
                        <a href="#">1</a>
                    </li>
                    <li>
                        <a href="#">2</a>
                    </li>
                    <li>
                        <a href="#">3</a>
                    </li>
                    <li>
                        <a href="#">4</a>
                    </li>
                    <li>
                        <a href="#">Next</a>
                    </li>
                </ul>
                <ul class="pager">
                    <li>
                        <a href="#">Prev</a>
                    </li>
                    <li>
                        <a href="#">Next</a>
                    </li>
                </ul>
            </div>
            <div class="panel panel-default" id="labels">
                <div class="panel-heading">
                    Labels and Badges
                </div>
                <h3><span class="label">Default</span><span class="label label-success">Success</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span><span class="label label-info">Info</span></h3>
                <p class="lead"><a href="#">Inbox <span class="badge">42</span></a></p>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default" id="alerts">
                <div class="panel-heading">
                    Alerts
                </div>
                <div>
                    <div class="alert alert-danger">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
                    </div>
                    <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
                    </div>
                    <div class="alert alert-warning">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
                    </div>
                    <div class="alert alert-info">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
                    </div>
                    <div class="alert alert-block">
                        <button type="button" class="close" data-dismiss="alert">×</button>
                        <h4>Warning!</h4>
                        <p>This is a block style alert.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="panel panel-default" id="progress">
                <div class="panel-heading">
                    Progress Bars
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-info" style="width: 20%"></div>
                </div>
                <div class="progress progress-striped active">
                    <div class="progress-bar progress-bar-success"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-warning" style="width: 60%"></div>
                </div>
                <div class="progress">
                    <div class="progress-bar progress-bar-danger" style="width: 80%"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default" id="media-object">
                <div class="panel-heading">
                    Media Object
                </div>
                <p></p>
                <div class="media">
                    <a class="pull-left" href="#">    <img class="media-object" src="@Resources.Root/Shared/Images/placeholder-64x64.png">  </a>
                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                        <p>This is the content for your media.</p>
                        <div class="media">
                            <a class="pull-left" href="#">    <img class="media-object" src="@Resources.Root/Shared/Images/placeholder-64x64.png">  </a>
                            <div class="media-body">
                                <h4 class="media-heading">Media heading</h4>
                                <p>This is the content for your media.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default" id="list-groups">
        <div class="panel-heading">
            List Groups
        </div>
        <div class="row">
            <div class="col-lg-4">
                <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
            <div class="col-lg-4">
                <div class="list-group">
                    <a href="#" class="list-group-item active">          Cras justo odio        </a><a href="#" class="list-group-item">Dapibus ac facilisis in        </a><a href="#" class="list-group-item">Morbi leo risus        </a><a href="#" class="list-group-item">Porta ac consectetur ac        </a><a href="#" class="list-group-item">Vestibulum at eros        </a>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="list-group">
                    <a href="#" class="list-group-item active">          <h4 class="list-group-item-heading">List group item heading</h4>          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>        </a><a href="#" class="list-group-item">          <h4 class="list-group-item-heading">List group item heading</h4>          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>        </a><a href="#" class="list-group-item">          <h4 class="list-group-item-heading">List group item heading</h4>          <p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>        </a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <div class="panel panel-primary" id="panels">
                <div class="panel-heading">
                    This is a header
                </div>
                <p>This is a panel</p>
                <div class="panel-footer">
                    This is a footer
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-success">
                <div class="panel-heading">
                    This is a header
                </div>
                <p>This is a panel</p>
                <div class="panel-footer">
                    This is a footer
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    This is a header
                </div>
                <p>This is a panel</p>
                <div class="panel-footer">
                    This is a footer
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-warning">
                <div class="panel-heading">
                    This is a header
                </div>
                <p>This is a panel</p>
                <div class="panel-footer">
                    This is a footer
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <div class="panel panel-info">
                <div class="panel-heading">
                    This is a header
                </div>
                <p>This is a panel</p>
                <div class="panel-footer">
                    This is a footer
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    This is a header
                </div>
                <p>This is a panel</p>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">First Item</li>
                    <li class="list-group-item">Second Item</li>
                    <li class="list-group-item">Third Item</li>
                </ul>
                <div class="panel-footer">
                    This is a footer
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="well" id="wells">
                Default Well
            </div>
            <div class="well well-small">
                Small Well
            </div>
        </div>
        <div class="col-lg-3">
            <div class="well well-large">
                Large Padding Well
            </div>
        </div>
    </div>
</div>