{% extends app.twig_theme ~ "/AudioClub/add_audio_albums/add_audio_albums.twig"%}

{% block footer_js %}

    {{ parent() }}
    {% include app.twig_theme ~ "/basic_templates/file-uploader-scripts.twig" %}

{% endblock %}

{% block footer_steps_js %}

    {{ parent() }}
    <script type="text/javascript">

        {% include app.twig_theme ~ "/AudioClub/add_audio_albums/add_audio_albums_step_1.js.twig" %}

    </script>

{% endblock %}

{% block form_step_by_step %}

    <h4 class="section-header"><span>{{ 'Basic'|trans }}</span></h4>

    {{ form_errors(app['form']) }}

    <div class="box-content">
        <div class="form-group">
            <label class="col-sm-2 control-label">{{ 'Artist'|trans }}<span class="icon-required">*</span></label>
            <div class="col-xs-10 col-sm-6">
                <div class=" col-xs-10 col-sm-6">
                    {{ form_widget(app['form'].id) }}
                    {{ form_widget(app['form'].performer_id, {'attr': {'class': 'populate placeholder', 'data-validation':'required'}}) }}
                    <div class="bg-danger">
                        {{ form_errors(app['form'].performer_id) }}
                    </div>
                </div>
                <a id="add_audio_artist" class="btn btn-default" title="{{'Add new artist to the list'|trans}}" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/add-audio-artists"><i class="fa fa-plus"></i>{{ 'Add artist'|trans }}</a>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">{{ 'Album'|trans }}<span class="icon-required">*</span></label>
            <div class="col-xs-10 col-sm-6">
                <div class=" col-xs-10 col-sm-6">
                    {{ form_widget(app['form'].name, {'attr': {'class': 'form-control', 'data-validation':'required'}}) }}
                    <div class="bg-danger">
                        {{ form_errors(app['form'].name) }}
                    </div>
                </div>
                <i class="i-hint"
                   title="{{ 'You can use letters, digits and symbols from the list: ! @ # $ % ^ & * ( ) _ - + : ; , .'|trans }}" >
                    <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                </i>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">{{ 'Genre'|trans }}<span class="icon-required">*</span></label>
            <div class="col-xs-10 col-sm-6">
                <div class=" col-xs-10 col-sm-6">
                    {{ form_widget(app['form'].genre_ids, {'attr': {'class': 'populate placeholder', 'data-validation':'required'}}) }}
                    <div class="bg-danger">
                        {{ form_errors(app['form'].genre_ids) }}
                    </div>
                </div>
                <a id="add_audio_genres" class="btn btn-default" title="{{'Add new genre to the list'|trans}}" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/add-audio-genres"><i class="fa fa-plus"></i>{{ 'Add genre'|trans }}</a>
                <i class="i-hint"
                    title="{{ 'You can choose up to 4 genres'|trans }}." >
                    <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                </i>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">{{ 'Year'|trans }}<span class="icon-required">*</span></label>
            <div class="col-xs-10 col-sm-6">
                <div class=" col-xs-10 col-sm-3">
                    {{ form_widget(app['form'].year_id, {'attr': {'class': 'populate placeholder', 'data-validation':'required'}}) }}
                    <div class="bg-danger">
                        {{ form_errors(app['form'].year_id) }}
                    </div>
                </div>
                <a class="btn btn-default" id="add_audio_years" title="{{'Add new year to the list'|trans}}" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/add-audio-years"><i class="fa fa-plus"></i>{{ 'Add year'|trans }}</a>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">{{ 'Country'|trans }}<span class="icon-required">*</span></label>
            <div class="col-xs-10 col-sm-6">
                <div class=" col-xs-10 col-sm-3">
                    {{ form_widget(app['form'].country_id, {'attr': {'class': 'populate placeholder', 'data-validation':'required'}}) }}
                    <div class="bg-danger">
                        {{ form_errors(app['form'].country_id) }}
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">{{ 'Cover'|trans }}</label>
            <div class="col-xs-10 col-sm-6" >
                <div class="col-xs-12 col-sm-12">
                    <div class="album-cover pull-left">
                        {{ form_widget(app['form'].cover) }}
                        <div id="fileupload" data-id="{% if app['form'].cover.vars.value %}{{ app['form'].cover.vars.value }}{% endif %}" data-file_num="0">
                            <input type="file" name="files" style="opacity: 0;">
                        </div>
                        <img class="img-rounded image-album-cover" src="{% if app['form'].cover.vars.value %}{{app.workHost}}{{ app['curr_cover_dir'] }}/{{ app['form'].cover.vars.value }}?ver={{ random(1000000) }}{% endif %}" alt="">
                        <a id="delete_cover" class="no_context_menu" href="#" data-cover="{% if app['form'].cover.vars.value %}{{ app['form'].cover.vars.value }}{% endif %}">
                            <span class="txt-primary">{{ 'Delete cover'|trans }}</span>
                        </a>
                    </div>
                    <i class="i-hint"
                        title="{{ 'Required cover dimensions are: 240x320 pixels'|trans }}" >
                        <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                    </i>
                </div>
            </div>
        </div>

    </div>

{% endblock form_step_by_step %}
