<commit_before>
<table class="table table-striped">
    <thead>
        <tr>
            <th width="25%">Component</th>
            <th>Progress</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#sl-alert">sl-alert</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-badge">sl-badge</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-button">sl-button</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-calendar">sl-calendar</a></td>
            <td>{{sl-progressbar label=true theme="warning" value="50"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-chart">sl-chart</a></td>
            <td>{{sl-progressbar label=true theme="danger" value="0"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-checkbox">sl-checkbox</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-datepicker">sl-datepicker</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-dropbutton">sl-dropbutton</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-grid">sl-grid</a></td>
            <td>{{sl-progressbar label=true theme="danger" value="20"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-input">sl-input</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-label">sl-label</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-progressbar">sl-progressbar</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-radiogroup">sl-radiogroup</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-select">sl-select</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-simplemodal">sl-simplemodal</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-tabpanel">sl-tabpanel</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-textarea">sl-textarea</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
    </tbody>
</table>

<hr>

<h2 id="sl-alert">sl-alert</h2>
{{#sl-alert}}<strong>Info</strong> alert theme (default){{/sl-alert}}
{{#sl-alert theme="success"}}<strong>Success</strong> alert theme{{/sl-alert}}
{{#sl-alert dismissable=true theme="warning"}}<strong>Warning</strong> alert theme (with dismissable=true){{/sl-alert}}
{{#sl-alert theme="danger"}}<strong>Danger</strong> alert theme{{/sl-alert}}

<hr>

<h2 id="sl-badge">sl-badge</h2>
<p><a>Link with badge {{sl-badge value=badgeValue}}</a></p>
<ul class="nav nav-pills">
    <li class="active">
        <a>
            {{sl-badge pullRight=true value=badgeValue}}
            Active pill with badge
        </a>
    </li>
</ul>

<hr>

<h2 id="sl-button">sl-button</h2>
{{sl-button
    action="pressButton"
    label="Button"
}}
{{sl-button label="Primary" theme="primary"}}
{{sl-button label="Success" theme="success"}}
{{sl-button label="Warning" theme="warning"}}
{{sl-button label="Danger" theme="danger"}}
{{sl-button disabled=true label="Disabled"}}

<hr>

<h2 id="sl-calendar">sl-calendar</h2>
{{sl-calendar
    action="calendarDateSelect"
    content=calendarData
    dateValuePath="startDate"
    multidate=true
}}

<hr>

<h2 id="sl-chart">sl-chart</h2>
{{sl-label text="Coming soon!" theme="info"}}

<hr>

<h2 id="sl-checkbox">sl-checkbox
    {{#if checkboxValue}}
        {{sl-label text="Checked!" theme="success"}}
    {{/if}}
</h2>
{{sl-checkbox
    label="Checkbox"
    name="checkbox"
    value=checkboxValue
}}

<hr>

<h2 id="sl-datepicker">sl-datepicker</h2>
<p><strong>Chosen date</strong>: {{formattedDate}}</p>
{{sl-datepicker
    daysOfWeekDisabled="0,6"
    value=datepickerValue
}}

<hr>

<h2 id="sl-dropbutton">sl-dropbutton</h2>
{{#sl-dropbutton content=dropbuttonOptions}}
    <i class="fa fa-cog"></i>
    Dropbutton
    <span class="caret"></span>
{{/sl-dropbutton}}

<hr>

<h2 id="sl-grid">sl-grid</h2>
{{sl-grid
    columns=gridColumns
    rows=gridRows
    striped=true
}}

<hr>

<h2 id="sl-input">sl-input</h2>
<p><strong>Input value</strong>: &ldquo;{{inputValue}}&rdquo;</p>
{{sl-input
    action="test"
    helpText="Example block-level help text here."
    inputId="inputTest"
    label="Input field"
    placeholder="Input goes here"
    value=inputValue
}}

<hr>

<h2 id="sl-label">sl-label</h2>
<h3>
    {{sl-label text="Default" theme="default"}}
    &emsp;
    {{sl-label text="Primary" theme="primary"}}
    &emsp;
    {{sl-label text="Warning" theme="warning"}}
</h3>

<hr>

<h2 id="sl-progressbar">sl-progressbar</h2>
{{sl-progressbar theme="danger" value="40"}}
{{sl-progressbar label=true theme="warning" value="60"}}
{{sl-progressbar label=true theme="success" striped=true value="80"}}
{{sl-progressbar active=true label=true striped=true value="100"}}

<hr>

<h2 id="sl-radiogroup">sl-radiogroup</h2>
<p><strong>Selected value</strong>: &ldquo;{{radiogroupValue}}&rdquo;</p>
{{sl-radiogroup
    content=radiogroupOptions
    name="radiogroupValue"
    value=radiogroupValue
}}

<hr>

<h2 id="sl-select">sl-select</h2>
<p><strong>Selected simple option</strong>: &ldquo;{{simpleSelectValue}}&rdquo;</p>
{{sl-select
    content=simpleSelectOptions
    disableSearch=true
    placeholder="Select a simple value"
    value=simpleSelectValue
}}
<br><br>
<p><strong>Selected advanced option</strong>: &ldquo;{{advancedSelectValue}}&rdquo;</p>
{{sl-select
    content=advancedSelectOptions
    placeholder="Select an advanced value"
    value=advancedSelectValue
}}

<hr>

<h2 id="sl-simplemodal">sl-simplemodal</h2>
{{sl-button action=openModal data-toggle="modal" data-target="#testModal" label="Open modal"}}
{{#sl-simplemodal close="closeModal" fade=true id="testModal" title="Test Modal"}}
    Hello world!
{{/sl-simplemodal}}

<hr>

<h2 id="sl-tabpanel">sl-tabpanel</h2>
{{sl-tabpanel
    activeTabName="Home"
    content=tabPanelContent
}}

<hr>

<h2 id="sl-textarea">sl-textarea</h2>
{{sl-textarea
    cols="80"
    rows="6"
    value=textareaValue
}}
<p><strong>Textarea value</strong>: &ldquo;{{textareaValue}}&rdquo;</p>

<hr>
<commit_msg>Updated demo page progress on sl-calendar<commit_after>
<table class="table table-striped">
    <thead>
        <tr>
            <th width="25%">Component</th>
            <th>Progress</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#sl-alert">sl-alert</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-badge">sl-badge</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-button">sl-button</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-calendar">sl-calendar</a></td>
            <td>{{sl-progressbar label=true theme="warning" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-chart">sl-chart</a></td>
            <td>{{sl-progressbar label=true theme="danger" value="0"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-checkbox">sl-checkbox</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-datepicker">sl-datepicker</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-dropbutton">sl-dropbutton</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-grid">sl-grid</a></td>
            <td>{{sl-progressbar label=true theme="danger" value="20"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-input">sl-input</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-label">sl-label</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-progressbar">sl-progressbar</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-radiogroup">sl-radiogroup</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-select">sl-select</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-simplemodal">sl-simplemodal</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-tabpanel">sl-tabpanel</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
        <tr>
            <td><a href="#sl-textarea">sl-textarea</a></td>
            <td>{{sl-progressbar label=true theme="success" value="100"}}</td>
        </tr>
    </tbody>
</table>

<hr>

<h2 id="sl-alert">sl-alert</h2>
{{#sl-alert}}<strong>Info</strong> alert theme (default){{/sl-alert}}
{{#sl-alert theme="success"}}<strong>Success</strong> alert theme{{/sl-alert}}
{{#sl-alert dismissable=true theme="warning"}}<strong>Warning</strong> alert theme (with dismissable=true){{/sl-alert}}
{{#sl-alert theme="danger"}}<strong>Danger</strong> alert theme{{/sl-alert}}

<hr>

<h2 id="sl-badge">sl-badge</h2>
<p><a>Link with badge {{sl-badge value=badgeValue}}</a></p>
<ul class="nav nav-pills">
    <li class="active">
        <a>
            {{sl-badge pullRight=true value=badgeValue}}
            Active pill with badge
        </a>
    </li>
</ul>

<hr>

<h2 id="sl-button">sl-button</h2>
{{sl-button
    action="pressButton"
    label="Button"
}}
{{sl-button label="Primary" theme="primary"}}
{{sl-button label="Success" theme="success"}}
{{sl-button label="Warning" theme="warning"}}
{{sl-button label="Danger" theme="danger"}}
{{sl-button disabled=true label="Disabled"}}

<hr>

<h2 id="sl-calendar">sl-calendar</h2>
{{sl-calendar
    action="calendarDateSelect"
    content=calendarData
    dateValuePath="startDate"
    multidate=true
}}

<hr>

<h2 id="sl-chart">sl-chart</h2>
{{sl-label text="Coming soon!" theme="info"}}

<hr>

<h2 id="sl-checkbox">sl-checkbox
    {{#if checkboxValue}}
        {{sl-label text="Checked!" theme="success"}}
    {{/if}}
</h2>
{{sl-checkbox
    label="Checkbox"
    name="checkbox"
    value=checkboxValue
}}

<hr>

<h2 id="sl-datepicker">sl-datepicker</h2>
<p><strong>Chosen date</strong>: {{formattedDate}}</p>
{{sl-datepicker
    daysOfWeekDisabled="0,6"
    value=datepickerValue
}}

<hr>

<h2 id="sl-dropbutton">sl-dropbutton</h2>
{{#sl-dropbutton content=dropbuttonOptions}}
    <i class="fa fa-cog"></i>
    Dropbutton
    <span class="caret"></span>
{{/sl-dropbutton}}

<hr>

<h2 id="sl-grid">sl-grid</h2>
{{sl-grid
    columns=gridColumns
    rows=gridRows
    striped=true
}}

<hr>

<h2 id="sl-input">sl-input</h2>
<p><strong>Input value</strong>: &ldquo;{{inputValue}}&rdquo;</p>
{{sl-input
    action="test"
    helpText="Example block-level help text here."
    inputId="inputTest"
    label="Input field"
    placeholder="Input goes here"
    value=inputValue
}}

<hr>

<h2 id="sl-label">sl-label</h2>
<h3>
    {{sl-label text="Default" theme="default"}}
    &emsp;
    {{sl-label text="Primary" theme="primary"}}
    &emsp;
    {{sl-label text="Warning" theme="warning"}}
</h3>

<hr>

<h2 id="sl-progressbar">sl-progressbar</h2>
{{sl-progressbar theme="danger" value="40"}}
{{sl-progressbar label=true theme="warning" value="60"}}
{{sl-progressbar label=true theme="success" striped=true value="80"}}
{{sl-progressbar active=true label=true striped=true value="100"}}

<hr>

<h2 id="sl-radiogroup">sl-radiogroup</h2>
<p><strong>Selected value</strong>: &ldquo;{{radiogroupValue}}&rdquo;</p>
{{sl-radiogroup
    content=radiogroupOptions
    name="radiogroupValue"
    value=radiogroupValue
}}

<hr>

<h2 id="sl-select">sl-select</h2>
<p><strong>Selected simple option</strong>: &ldquo;{{simpleSelectValue}}&rdquo;</p>
{{sl-select
    content=simpleSelectOptions
    disableSearch=true
    placeholder="Select a simple value"
    value=simpleSelectValue
}}
<br><br>
<p><strong>Selected advanced option</strong>: &ldquo;{{advancedSelectValue}}&rdquo;</p>
{{sl-select
    content=advancedSelectOptions
    placeholder="Select an advanced value"
    value=advancedSelectValue
}}

<hr>

<h2 id="sl-simplemodal">sl-simplemodal</h2>
{{sl-button action=openModal data-toggle="modal" data-target="#testModal" label="Open modal"}}
{{#sl-simplemodal close="closeModal" fade=true id="testModal" title="Test Modal"}}
    Hello world!
{{/sl-simplemodal}}

<hr>

<h2 id="sl-tabpanel">sl-tabpanel</h2>
{{sl-tabpanel
    activeTabName="Home"
    content=tabPanelContent
}}

<hr>

<h2 id="sl-textarea">sl-textarea</h2>
{{sl-textarea
    cols="80"
    rows="6"
    value=textareaValue
}}
<p><strong>Textarea value</strong>: &ldquo;{{textareaValue}}&rdquo;</p>

<hr>

{'fraction_non_alphanumeric': 0.21435155640643835, 'fraction_numerical': 0.01411047294901794, 'mean_word_length': 3.193874516800476, 'pattern_counts': {'":': 0, '<': 503, '<?xml version=': 0, '>': 503, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1036779', 'n_tokens_mistral': 5187, 'n_tokens_neox': 4963, 'n_words': 809}