{% extends "layout.html" %}
{% block content %}

<div class="container">
  <form class="themeform" role="form" action="" method="post">
    {% for theme_name in ['cerulean', 'cosmo', 'cyborg', 'darkly', 'flatly', 'journal', 'lumen', 'paper', 'readable', 'sandstone', 'simplex', 'slate', 'spacelab', 'superhero', 'united', 'yeti'] %}
    <label class="radio-inline">
      <input type="radio" name="theme_name" id="radio_{{theme_name}}"
             {% if theme_name == theme %}checked{% endif %}
             value="{{theme_name}}">{{theme_name}}
    </label><br>
    {% endfor %}
    <br>
    <input type="submit" class="btn btn-default" value="Select theme">
  </form>

  <div class="checkbox">
    <label>
      <input type="checkbox" id="boss-key" value=""/>
      Management dashboard
    </label>
  </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" id="status-box" value=""/>
                Status box popups
        </label>
    </div>
</div>


{% endblock %}

{% block scripts %}
<script type="text/javascript">
  var bossKey = $('#boss-key');
  bossKey.change(function () {
    window.localStorage.setItem("show-mgmt-bar", this.checked);
    console.log(this.checked);
  });
  bossKey.prop('checked', window.localStorage.getItem("show-mgmt-bar") === "true");
</script>

<script type="text/javascript">
    var statusBox = $('#status-box');
    statusBox.change(function () {
        window.localStorage.setItem("show-status-popups", this.checked);
        console.log(this.checked);
    });
    statusBox.prop('checked', window.localStorage.getItem("show-status-popups") === "true");
</script>
{% endblock %}
