{% extends 'music/base.html' %}
{% block title %}Add a New Album{% endblock %}
{% block albums_active %}active{% endblock %}

{% block body %}
<div class="container-fluid">

    <div class="row">

        <div class="col-sm-12 col-md-7">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h3>Add a New Album</h3>
                    {% if error_message %}
                        <p><strong>{{ error_message }}</strong></p>
                    {% endif %}
                    <form class="form-horizontal" role="form" action="" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% include 'music/form-template.html' %}
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-success">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-sm-12 col-md-5">
            <div class="panel panel-default">
                <div class="panel-body">
                    <h3>What is Viberr?</h3>
                    <p>Viberr is an app that allows you to upload and store all of your music on the cloud.</p>
                    <h3>How do I add music?</h3>
                    <p>First, create a new album by filling out the form on this page. Once an album is created you will be able to add/upload songs.</p>
                    <h3>What are some Album logo best practices?</h3>
                    <ul>
                        <li>Have a resolution of 512x512</li>
                        <li>Use common image formats such as .JPG, .GIF, or .PNG</li>
                        <li>Remain under the 2MB limit.</li>
                        <li>Square images look best</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>

</div>
{% endblock %}