<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <h:form onsubmit="return false;">
        <div class="layout-rightpanel">
            <div class="rightpanel-wrapper">
                <div class="section-tasks today">
                    <h5>Your Tasks Today</h5>
                    <ul>
                        <li>
                            <p:selectBooleanCheckbox value="true" onchange="onTaskCheckboxChange(this)"/>
                            <div class="task done">
                                <h6>Sales reports</h6>
                                <span>Today</span>
                            </div>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox value="true" onchange="onTaskCheckboxChange(this)"/>
                            <div class="task done">
                                <h6>Pay invoices</h6>
                                <span>Today</span>
                            </div>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox value="false" onchange="onTaskCheckboxChange(this)"/>
                            <div class="task">
                                <h6>Dinner with Tony</h6>
                                <span>Today, 22:36</span>
                            </div>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox value="false" onchange="onTaskCheckboxChange(this)"/>
                            <div class="task">
                                <h6>Client meeting</h6>
                                <span>Today</span>
                            </div>
                        </li>
                    </ul>
                </div>

                <hr/>

                <div class="section-tasks upcoming">
                    <h5>Upcoming</h5>

                    <ul>
                        <li>
                            <p:selectBooleanCheckbox value="false" onchange="onTaskCheckboxChange(this)"/>
                            <div class="task">
                                <h6>New representative meeting</h6>
                                <span>27 May</span>
                            </div>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox value="false" onchange="onTaskCheckboxChange(this)"/>
                            <div class="task">
                                <h6>Flight tickets</h6>
                                <span>28 May</span>
                            </div>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox value="false" onchange="onTaskCheckboxChange(this)"/>
                            <div class="task">
                                <h6>Generate charts</h6>
                                <span>29 May</span>
                            </div>
                        </li>
                        <li>
                            <p:selectBooleanCheckbox value="false" onchange="onTaskCheckboxChange(this)"/>
                            <div class="task">
                                <h6>Delete old files</h6>
                                <span>30 May</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </h:form>

    <script type="text/javascript">
        function onTaskCheckboxChange(input) {
            if (input) {
                var inputEl = $(input);
                var taskEl = inputEl.closest('.ui-selectbooleancheckbox').next();

                if (inputEl.is(':checked'))
                    taskEl.addClass('done');
                else
                    taskEl.removeClass('done');
            }
        }
    </script>

</ui:composition>