<div class="modal fade" id="editAlbumModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit album</h4>
      </div>
      <div class="modal-body">
          <form>
              <input type="hidden" id="album-id">
              <div class="form-group">
                  <label for="album-name" class="control-label">
                      Album name:
                  </label>
                  <input type="text" class="form-control" id="album-name">
              </div>
              <div class="form-group">
                  <label for="album-description" class="control-label">
                      Album description:
                  </label>
                  <textarea class="form-control" id="album-description">
                  </textarea>
              </div>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="editAlbum()">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

{% set form = panel_forms.add_album_form %}
<div class="panel panel-default">
    <div class="panel-body">
        <div class="container">
            <form class="form-inline" method="POST">
                {{ form.hidden_tag() }}
                <div class="form-group">
                    {{ form.album_name(class_="form-control", placeholder=form.album_name.description) }}
                </div>
                <div class="form-group">
                    {{ form.album_description(class_="form-control", placeholder=form.album_description.description) }}
                </div>
                <div class="form-group">
                    {{ form.submit_button(class_="btn btn-primary") }}
                </div>
            </form>
        </div>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-body">
        <div class="container">
            <table id="albums-table"
                   data-toggle="table"
                   data-url="/api/get-albums-list"
                   data-sort-name="name"
                   data-sort-order="asc"
                   data-striped="true">
                <thead>
                <tr>
                    <th class="col-xs-3"
                        data-field="name"
                        data-sortable="true">
                        Album name
                    </th>
                    <th class="col-xs-5"
                        data-field="description"
                        data-sortable="true">
                        Album description
                    </th>
                    <th class="col-xs-2"
                        data-field="pics_count"
                        data-sortable="true">
                        Count of pictures
                    </th>
                    <th class="col-xs-2" data-align="center" data-field="actions">
                        Actions
                    </th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script src="/static/js/ajax-post.js"></script>
<script src="/static/js/bootstrap-table.min.js"></script>
<script src="/static/js/manage-albums.js"></script>
