{% extends "sidebar.html" %}
{% block body%}
<div class="container profile">
    <p class="name">Sun View</p>
</div>
<div class="container">
    <i class="fa fa-arrow-left" style="font-size: 4rem; color: #ddd; margin-bottom: 3rem"></i>
    <img class="preview" src="/static/res/sunview.png" alt="Profile Picture"></img> 
    <i class="fa fa-arrow-right" style="font-size: 4rem; color: #ddd; margin-bottom: 3rem"></i>
</div>
<div class="sub container">
    <p class=name>Sun</p>
    <div style="flex-grow: 1"></div>
<label class="switch">
    <input class="toggle" id=Sun type="checkbox" toggled="True" >
    <span class="slider round"></span>
</label>
</div> 
<div class="sub container">
    <p class=name>Planet</p>
    <div style="flex-grow: 1"></div>
<label class="switch">
    <input class="toggle" id=Sun type="checkbox" toggled="True" >
    <span class="slider round"></span>
</label>
</div> 
<div class="sub container">
    <p class=name>Dwarf</p>
    <div style="flex-grow: 1"></div>
    <label class="switch"> 
    <input class="toggle" id=Sun type="checkbox" toggled="True" >
    <span class="slider round"></span>
</label>
</div> 
<div class="sub container">
    <p class=name>Calendar</p>
    <div style="flex-grow: 1"></div>
    <label class="switch">
    <input class="toggle" id=Sun type="checkbox" toggled="True" >
    <span class="slider round"></span>
</label>
</div> 
{% endblock %}