<style type="text/css">{% for user in users %}
      div.{{ user.name }} { background-color: {{ user.color }} !important; }{% endfor %}
      </style>

      <button id="begin_edit" class="btn btn-info">+ hinzufügen</button>

      <!-- navbar -->
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        {% csrf_token %}

        <!-- advanced options -->
        <div id="advanced_options">
          <label for="exists" class="noexist">
            <input id="exists" type="checkbox">
            Existiert nicht
          </label>
          <label for="ec" id="label_ec" class="ec">
            <input id="ec" type="checkbox">
            Eurocollector 2002&nbsp;
          </label>
          <label for="checked" id="label_checked" class="checked">
            <input id="checked" type="checkbox">
            Überprüft, einsortiert&nbsp;
          </label>
          <label for="buy_only" id="label_buy_only" class="buy_only">
            <input id="buy_only" type="checkbox">
            Kursmünze&nbsp;
          </label>
          <label for="circulation">
            Auflage
            <input id="circulation" type="text" value="Auflage">
          </label>
          <label for="found_on">
            Datum
            <input type="text" name="found_on" id="found_on" value="{% now 'd.m.Y' %}">
          </label>
          <label for="found" id="found_label">
            <input id="found" type="checkbox" checked="checked">
            Gefunden
          </label>
        </div>

        <!-- main options -->
        <div id="navbar_toggler">
          <label for="found_by">
            <select id="found_by" name="found_by" class="form-control">{% for user in users %}
              <option value="{{ user.name }}" color="{{ user.color }}">{{ user.name }}</option>{% endfor %}
            </select>
          </label>
          <div id="buttons">
            <button id="show_add_user" class="btn btn-secondary">+ Name</button>
            <button id="finish_edit" class="btn btn-success">Fertig</button>
            <button id="show_advanced_options" class="btn btn-outline-secondary" aria-controls="navbar_toggler" aria-expanded="false" aria-label="Toggle advanced options"><span class="navbar-toggler-icon"></span></button>
          </div>
        </div>
      </nav>

      <!-- modal add_user -->
      <div id="add_user" class="modal-container">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Name hinzufügen</h5>
              <button id="add_user_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label for="text_user">Name</label>
                <input type="text" name="name" id="add_user_name" class="form-control">
              </div>
              <div class="form-group">
                <label for="text_color">Farbe</label>
                <input type="text" name="color" id="add_user_color" class="form-control">
              </div>
            </div>
            <div class="modal-footer">
              <span id="response"></span>
              <button type="button" id="add_user_action" class="btn btn-primary">+ Name hinzufügen</button>
            </div>
          </div>
        </div>
      </div>

      <!-- modal add_coin_name -->
      <div id="add_coin_name" class="modal-container">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Sondermünze</h5>
              <button id="add_coin_name_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="form-group">
                <label for="add_coin_name_name">Name</label>
                <input type="text" name="name" id="add_coin_name_name" class="form-control">
              </div>
            </div>
            <div class="modal-footer">
              <span id="response"></span>
              <button type="button" id="add_coin_name_action" class="btn btn-primary">+ Münze hinzufügen</button>
            </div>
          </div>
        </div>
      </div>
