{% extends app['twig_theme'] ~ '/layout.twig' %}
{% import  app['twig_theme'] ~ '/macro/iptw_macro.twig' as main_macro %}

{% set title = ('Audio club'|trans ~ ': ' ~ (app.audioAlbumEdit ? ('Edit album'|trans ~ " '"~ app.albumName ~ "'"): 'Add album'|trans)) | trans %}
{% set active_alias = 'audio-albums' %}


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

        <script src="{{app.request_context.baseUrl}}/plugins/datatables/extensions/RowReorder/js/dataTables.rowReorder.min.js"></script>

{% endblock %}
{% block footer %}
    
        {{ parent() }}
        <script type="text/javascript" defer>
            {% include app.twig_theme ~ "/AudioClub/add_audio_albums/add_audio_albums.js.twig" %}
        </script>
        
{% endblock %}


{% block content %}
    <div id="add_channel">
        {{ form_start(app['form'], {'method': 'POST', 'action': (app.request_context.baseUrl ~ '/' ~ app.controller_alias  ~ '/' ~ app.action_alias) | trans, 'attr': {'class': 'form-horizontal', 'role': 'form', 'id': 'form_'}}) }}
        <div class="bg-danger">
            <div class="bg-danger">
                {{ form_errors(app['form']) }}
            </div>
        </div>
        <div class="row">
            <div class="">
                <div class="box">

                    {% set form_steps = {
                        1 : 'Basic',
                        2 : 'Tracks'
                    } %}

                    <ol class="step-wizard-progress-bar active-1 clearfix">
                        {% for step, step_name in form_steps %}
                            <li class=" step-{{ step }} ">{% if true %}<a class="no_context_menu" href="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/{{ app.action_alias }}/?step={{ step }}{% if attribute(app, 'id') is defined %}&id={{ app.id }}{% endif %}">{{ step_name|trans }}</a>{% else %}{{ step_name|trans }}{% endif %}</li>
                        {% endfor %}
                    </ol>

                    <h4 class="section-header"><span>{{ 'Basic'|trans }}</span></h4>
                    {#
                    <a class="collapse-link">
                        <div class="box-header">
                            <div class="box-name">
                                <div class="row">
                                    <div class="col-xs-10 col-sm-3">
                                        <span>{{ 'Basic'|trans }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="box-icons">
                                <i class="fa fa-chevron-up"></i>
                            </div>
                            <div class="no-move"></div>
                        </div>
                    </a>
                    #}
                    <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 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 }}. {{ 'You can use Add button to add missed genres to 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">{{ '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-6 col-sm-6">
                                    <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>
                                    {{ form_widget(app['form'].cover) }}
                                    <img class="img-rounded channel-logo" 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>
                            </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="pull-left" id="cover_container">
                                    {{form_widget(app['form'].cover) }}
                                    <img class="img-rounded channel-logo" src="{% if app['form'].cover.vars.value%}{{app.workHost}}{{app['curr_cover_dir']}}{{app['form'].cover.vars.value}}?ver={{ random(1000000) }}{% endif %}" alt="" style="max-width: 100%;">
                                    <a id="delete_cover" class="no_context_menu" href="#"><span class="txt-primary">{{ 'Delete cover'|trans }}</span></a>
                                </div>

                                <!-- The file upload form used as target for the file upload widget -->
                                <div id="fileupload" class="clear-left pull-left">
                                    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
                                    <div class="fileupload-buttonbar">
                                        <div class="fileupload-buttons">
                                            <!-- The fileinput-button span is used to style the file input field as button -->
                                            <span class="fileinput-button btn btn-success">
                                            <span>{{ 'Add a picture'|trans }}</span>
                                            <input type="file" name="files" style="opacity: 0;">
                                        </span>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        #}
                    </div>
                </div>

                <div class="form-buttons col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="box">
                        <div class="box-content">
                            <div class="row">
                                <div class="col-xs-10 col-sm-8 pull-right">
                                    {{ form_widget(app['form'].save, { 'label': 'Save'|trans , attr: {'class': 'btn btn-success pull-right'}}) }}
                                    <a href="{{app.request_context.baseUrl}}/{{app.controller_alias}}/audio-albums" class="btn btn-default pull-right">{{ 'Cancel'|trans }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box">
                    <h4 class="section-header"><span>{{ 'Tracks'|trans }}</span></h4>
                    {#
                    <a class="collapse-link">
                        <div class="box-header">
                            <div class="box-name">
                                <div class="row">
                                    <div class="col-xs-10 col-sm-3">
                                        <span>{{ 'Tracks'|trans }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="box-icons">
                                <i class="fa fa-chevron-up"></i>
                            </div>
                            <div class="no-move"></div>
                        </div>
                    </a>
                    #}
                    <div class="box-content" id="iptv_list">
                        <div class="row3">
                            <div class="col-xs-8 col-sm-12">
                                <a href="{{app.request_context.baseUrl}}/{{app.controller_alias}}/add-audio-track" id="add_track" class="btn btn-success pull-right no_context_menu">{{ 'Add track'|trans }}</a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="box">
                                    {% if attribute(app, 'dropdownAttribute') is defined %}
                                        {{ main_macro.get_dropdown_attribute(app['dropdownAttribute']) }}
                                    {% endif %}
                                    <div class="box-content">
                                        <div class="box-content no-padding">
                                            <div class="dataTables_processing"></div>
                                            <table class="table  table-hover table-datatable" id="datatable-1" data-album_id="{{ app['audioAlbumID'] }}">
                                                {% if attribute(app, 'dropdownAttribute') is defined %}
                                                    {{ main_macro.get_datatable_head(app['dropdownAttribute']) }}
                                                {% endif %}
                                                <tbody>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div style="">
            {{ form_rest(app.form) }}
        </div>
        {{ form_end(app['form']) }}
    </div>

    <div id="modalbox_ad">
        <div class="devoops-modal">
            <div class="devoops-modal-header">
                <div class="modal-header-name">
                    <span></span>
                </div>
                <div class="box-icons">
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <form class="form-horizontal" role="form" id="track_form" action="{{ app.request_context.baseUrl }}/{{ app.controller_alias }}/audio-tracks-manage">
                <div class="devoops-modal-inner">
                    <div class="box">
                        <div class="box-content no-padding">
                            <div class="col-sm-8 col-sm-offset-2" id="file_form_input_container">
                                <!-- track name -->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{ 'Title'|trans }}<span class="icon-required">*</span></label>
                                    <div class="col-xs-10 col-sm-10 no-padding">
                                        <div class=" col-xs-10 col-sm-10 ">
                                            <input type="hidden" name="id">
                                            <input type="text" name="name" data-validation='required' class='form-control'>
                                        </div>
                                        <i class="i-hint"
                                            title="{{ 'You can use symbols from the list: ! @ # $ % ^ & * ( ) _ - + : ; , .'|trans }}" >
                                            <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                                        </i>
                                    </div>
                                </div>

                                <!-- language -->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{ 'Language'|trans }}<span class="icon-required">*</span></label>
                                    <div class="col-xs-10 col-sm-10 no-padding">
                                        <div class=" col-xs-10 col-sm-6 ">
                                            <select class="populate placeholder" data-validation='required' name="language_id" id="s2_track_lang">
                                                {% if attribute(app, 'allLanguages') is defined %}
                                                    {% for s_item in app.allLanguages %}
                                                        <option value="{{s_item.id}}">{{s_item.name}}</option>
                                                    {% endfor %}
                                                {% endif %}
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- URL -->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{ 'URL'|trans }}<span class="icon-required">*</span></label>
                                    <div class="col-xs-10 col-sm-10 no-padding">
                                        <div class=" col-xs-10 col-sm-10">
                                            <input id="audio_url" type="text" name="url" data-validation = 'required custom' data-validation-regexp = '^(\w+\s)?\w+\:\/\/.+$' data-validation-error-msg-custom = "{{ 'Invalid format links'|trans }}" class='form-control' >
                                        </div>
                                        <i class="i-hint"
                                            title="{{ 'Accepted input: URL or solution + URL. Example ffmpeg http://example.com/track.mp3'|trans }}" >
                                            <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                                        </i>
                                    </div>
                                </div>

                                <!-- duration -->
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">{{ 'Duration'|trans }}<span class="icon-required">*</span></label>
                                    <div class="col-xs-10 col-sm-10 no-padding">
                                        <div class=" col-xs-10 col-sm-10">
                                            <input type="text" name="duration" class='form-control' data-validation='required number'>
                                        </div>
                                        <i class="i-hint"
                                            title="{{ 'Track duration in seconds'|trans }}" >
                                            <img class="i-hint-sign" src="{{app.request_context.baseUrl}}/img/field-hint-sign.svg" />
                                        </i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="devoops-modal-bottom">
                    <div class="col-xs-12">
                        <button type="reset"  class="btn btn-default col-sm-2 pull-right" >{{ 'Cancel'|trans }}</button>
                        <button type="submit" class="btn btn-success col-sm-2 pull-right">{{ 'Save'|trans }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    
    <script type="text/template" id="media_info_body">
        <div class="col-sm-4" id="media_info">
            <button class="btn btn-success btn-block disabled" disabled="disabled">{{ 'Autofill'|trans }}</button>
        </div>
    </script>

    <script type="text/template" id="media_info_info">
        <span class="col-sm-12 center" data-info-key="" data-info-val=""></span>
    </script>

{% endblock %}
