{{#i18n-namespace "com.fitbit.app.ngd.charge101" }}

<div class="charge101-modal wearing-charge">
    <a class="close closeBtn">x</a>

    <div class="paddingContainer">
        <div class="header">
            <h2>
                {{{i18n 'charge101_heading' }}}
            </h2>
            <ul class="nav">
                <li class="basics">
                    <a>
                        <strong>{{{i18n 'nav_basics' }}}</strong>
                    </a>
                </li>
                <li class="goals">
                    <a>
                        <strong>{{{i18n 'nav_goals' }}}</strong>
                    </a>
                </li>
                <li class="calls">
                    <a>
                        <strong>{{{i18n 'nav_calls' }}}</strong>
                    </a>
                </li>
                <li class="sleep">
                    <a>
                        <strong>{{{i18n 'nav_sleep' }}}</strong>
                    </a>
                </li>
            </ul>
        </div>

        <div class="body">

            <ul class="screens">
                {{#each screens}}
                <li class="screen {{name}}" data-screen-name="{{name}}">
                    <div class="section">
                        {{{contents}}}
                    </div>
                </li>
                {{/each}}
            </ul>

        </div>
    </div>

    <div class="navActions">
        <ul class="actions">
            <li>
                <a rel="prev">&lt; {{{i18n 'actions_back' }}}</a>
            </li>
            <li>
                <a rel="next">{{{i18n 'actions_next' }}} &gt;</a>
            </li>
            <li>
                <a class="close" rel="done">{{{i18n 'actions_done' }}}</a>
            </li>
        </ul>
    </div>
</div>
{{/ i18n-namespace}}