{% load static %}
{% load form_helpers %}
{% load helpers %}
<!-- Theme Setting Modal -->
<div id="theme_modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Select A Theme</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive-md">
                    <table class="table theme-table">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center">Light</th>
                                <th scope="col" class="text-center">Dark</th>
                                <th scope="col" class="text-center">System</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td id="td-light-theme"><a href="#" onclick="toggleTheme('light');" id="btn-light-theme"><img src="{% static 'img/light-theme.png' %}" id="img-light-theme" alt="Light" height="170" width="232" class="img-responsive" /></a></td>
                                <td id="td-dark-theme"><a href="#" onclick="toggleTheme('dark');" id="btn-dark-theme"><img src="{% static 'img/dark-theme.png' %}" id="img-dark-theme" alt="Dark" height="170" width="232" class="img-responsive" /></a></td>
                                <td id="td-system-theme"><a href="#" onclick="toggleTheme('system');" id="btn-system-theme"><img src="{% static 'img/system-theme.png' %}" id="img-system-theme" alt="Toggle" height="170" width="232" class="img-responsive" /></a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="dismiss-modal-theme" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>