<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l">
      <section class="heading-title">
        <h1 translate>{{ 'customize_the_application' }}</h1>
      </section>
    </div>

  </div>
</section>

<section class="m-lg">
  <div class="row">

    <div class="col-md-12">
      <uib-tabset justified="true">

        <uib-tab heading="{{ 'general' | translate }}">
            <div class="panel panel-default m-t-md">
                <div class="panel-heading">
                    <span class="font-sbold" translate>{{ 'title' }}</span>
                </div>
                <div class="panel-body">
                    <div class="row m-t-lg">
                        <div class="col-md-4">
                            <form role="form" novalidate>
                                <label for="fablabName" class="control-label m-r" translate>{{ 'fablab_title' }}</label>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon"><i class="fa fa-font"></i></div>
                                        <input type="text" id="fablabName" ng-model="fablabName.value" class="form-control" placeholder="{{ 'fablab_name' | translate }}"/>
                                    </div>
                                </div>
                                <button name="button" class="btn btn-warning" ng-click="save(fablabName)" translate>{{ 'save' }}</button>
                            </form>
                        </div>

                        <div class="col-md-4 col-md-offset-1">
                            <form role="form" novalidate>
                                <h4 class="control-label m-r" translate>{{ 'title_concordance' }}</h4>
                                <div class="form-group">
                                    <input type="radio" name="nameGenre" id="nameGenreMale" ng-model="nameGenre.value" ng-value="'male'" />
                                    <label for="nameGenreMale">{{ 'male' | translate }} <span style="font-weight: normal">{{ 'eg' | translate }} <cite>{{ 'about' | translate }} <strong translate>{{ 'male_preposition' }}</strong> {{fablabName.value}}</cite></span></label>
                                    <br/>
                                    <input type="radio" name="nameGenre" id="nameGenreFemale" ng-model="nameGenre.value" ng-value="'female'" />
                                    <label for="nameGenreFemale">{{ 'female' | translate }} <span style="font-weight: normal">{{ 'eg' | translate }} <cite>{{ 'about' | translate }} <strong translate>{{ 'female_preposition' }}</strong> {{fablabName.value}}</cite></span></label>
                                </div>
                                <button name="button" class="btn btn-warning" ng-click="save(nameGenre)" translate>{{ 'save' }}</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="panel panel-default m-t-lg">
                <div class="panel-heading">
                  <span class="font-sbold" translate>{{ 'customize_information_messages' }}</span>
                </div>
                <div class="panel-body">


                  <div class="row">
                    <div class="col-md-3">
                      <h4 translate>{{ 'message_of_the_machine_booking_page' }}</h4>
                      <div ng-model="machineExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
                      }'>

                      </div>
                      <button name="button" class="btn btn-warning" ng-click="save(machineExplicationsAlert)" translate>{{ 'save' }}</button>
                    </div>
                    <div class="col-md-3">
                      <h4 translate>{{ 'warning_message_of_the_training_booking_page'}}</h4>
                      <div ng-model="trainingExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
                      }'>

                      </div>
                      <button name="button" class="btn btn-warning" ng-click="save(trainingExplicationsAlert)" translate>{{ 'save' }}</button>
                    </div>
                    <div class="col-md-3">
                      <h4 translate>{{ 'information_message_of_the_training_reservation_page'}}</h4>
                      <div ng-model="trainingInformationMessage.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
                        "buttons": ["bold", "italic", "unorderedlist", "header2" ]
                      }'>

                      </div>
                      <button name="button" class="btn btn-warning" ng-click="save(trainingInformationMessage)" translate>{{ 'save' }}</button>
                    </div>
                    <div class="col-md-3">
                      <h4 translate>{{ 'message_of_the_subscriptions_page' }}</h4>
                      <div ng-model="subscriptionExplicationsAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
                      "buttons": ["bold", "italic", "unorderedlist", "header2" ]
                      }'>
                      </div>
                      <button name="button" class="btn btn-warning" ng-click="save(subscriptionExplicationsAlert)" translate>{{ 'save' }}</button>
                    </div>
                  </div>
                  <div class="row">
                      <div class="col-md-3">
                          <h4 translate>{{ 'message_of_the_event_page_relative_to_the_reduced_rate_availability_conditions' }}</h4>
                          <div ng-model="eventReducedAmountAlert.value" medium-editor options='{"placeholder": "{{ "type_the_message_content" | translate }}",
                                "buttons": ["bold", "italic", "unorderedlist", "header2" ]
                          }'>
                          </div>
                          <button name="button" class="btn btn-warning" ng-click="save(eventReducedAmountAlert)" translate>{{ 'save' }}</button>
                      </div>
                  </div>

                </div>
            </div>

            <div class="panel panel-default m-t-lg">
                <div class="panel-heading">
                    <span class="font-sbold" translate>{{ 'legal_documents'}}</span>
                </div>
                <div class="panel-body">
                    <div class="alert alert-warning m-t" translate>
                        {{ 'if_these_documents_are_not_filled_no_consent_about_them_will_be_asked_to_the_user' }}
                    </div>
                    <div class="row">
                        <form class="col-md-6" method="post" action="{{actionUrl.cgv}}" novalidate name="cgvForm" ng-upload="submited(content)" ng-submit="addLoader('cgv')" upload-options-enable-rails-csrf="true" unsaved-warning-form>
                            <input type="hidden" name="custom_asset[name]" value="cgv-file">
                            <input name="_method" type="hidden" ng-value="methods.cgv">
                            <label for="moveDelay" class="control-label m-r" translate>{{ 'general_terms_and_conditions_(T&C)' }}</label>
                            <div class="form-group">
                                <div class="fileinput input-group" data-provides="fileinput" ng-class="fileinputClass(cgvFile.custom_asset_file_attributes.attachment)">
                                    <div class="form-control" data-trigger="fileinput">
                                        <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">{{cgvFile.custom_asset_file_attributes.attachment}}</span>
                                    </div>
                                      <span class="input-group-addon btn btn-default btn-file">
                                          <span class="fileinput-new" translate>{{ 'browse' }}</span>
                                          <span class="fileinput-exists" translate>{{ 'change' }}</span>
                                          <input type="file"
                                                 name="custom_asset[custom_asset_file_attributes][attachment]"
                                                 accept=".pdf"
                                                 required />
                                      </span>
                                </div>
                            </div>
                            <button name="button" type="submit" ng-class="{'btn-loading':loader.cgv}" ng-disabled="cgvForm.$invalid" class="btn btn-warning" translate>{{ 'save' }}</button>
                        </form>
                    </div>
                    <div class="row m-t-xl">
                        <form class="col-md-6" method="post" action="{{actionUrl.cgu}}" novalidate name="cguForm" ng-upload="submited(content)" ng-submit="addLoader('cgu')" upload-options-enable-rails-csrf="true" unsaved-warning-form>
                            <input type="hidden" name="custom_asset[name]" value="cgu-file">
                            <input name="_method" type="hidden" ng-value="methods.cgu">
                            <label for="moveDelay" class="control-label m-r" translate>{{ 'terms_of_service_(TOS)' }}</label>
                            <div class="form-group">
                                <div class="fileinput input-group" data-provides="fileinput" ng-class="fileinputClass(cguFile.custom_asset_file_attributes.attachment)">
                                    <div class="form-control" data-trigger="fileinput">
                                        <i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename">{{cguFile.custom_asset_file_attributes.attachment}}</span>
                                    </div>
                                      <span class="input-group-addon btn btn-default btn-file">
                                          <span class="fileinput-new" translate>{{ 'browse' }}</span>
                                          <span class="fileinput-exists" translate>{{ 'change' }}</span>
                                          <input type="file"
                                                 name="custom_asset[custom_asset_file_attributes][attachment]"
                                                 accept=".pdf"
                                                 required />
                                      </span>
                                </div>
                            </div>
                            <button name="button" type="submit" ng-class="{'btn-loading':loader.cgu}" ng-disabled="cguForm.$invalid" class="btn btn-warning" translate>{{ 'save' }}</button>
                        </form>
                    </div>
                </div>
            </div>

            <div class="panel panel-default m-t-lg">
                <div class="panel-heading">
                    <span class="font-sbold" translate>{{ 'customize_the_graphics' }}</span>
                </div>
                <div class="panel-body">
                    <div class="alert alert-warning m-t">
                        <span translate>{{ 'for_an_optimal_rendering_the_logo_image_must_be_at_the_PNG_format_with_a_transparent_background_and_with_an_aspect_ratio_3.5_times_wider_than_the_height' }}</span><br/>
                        <span translate>{{ 'concerning_the_favicon_it_must_be_at_ICO_format_with_a_size_of_16x16_pixels' }}</span><br/>
                        <br/>
                        <span translate>{{ 'remember_to_refresh_the_page_for_the_changes_to_take_effect' }}</span>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <form class="custom-logo-container" method="post" action="{{actionUrl.logo}}" novalidate name="logoForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
                                <input type="hidden" name="custom_asset[name]" value="logo-file">
                                <input name="_method" type="hidden" ng-value="methods.logo">
                                <h3 class="m-l" translate>{{ 'logo_(white_background)' }}</h3>
                                <div class="custom-logo" style="background-image: url({{customLogo}});">
                                    <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!customLogo" class="img-responsive">
                                    <img base-sixty-four-image="customLogo" ng-show="customLogo && customLogo.base64">
                                    <img ng-src="{{customLogo.custom_asset_file_attributes.attachment_url}}" alt="{{customLogo.custom_asset_file_attributes.attachment}}" ng-show="customLogo && customLogo.custom_asset_file_attributes" />
                                    <div class="tools-box">
                                        <div class="btn-group">
                                            <div class="btn btn-default btn-file">
                                                <i class="fa fa-edit"></i> {{ 'change_the_logo' | translate }}
                                                <input type="file"
                                                       accept="image/png,image/x-png"
                                                       name="custom_asset[custom_asset_file_attributes][attachment]"
                                                       ng-model="customLogo"
                                                       base-sixty-four-input
                                                       required />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="logoForm.$invalid" translate>{{ 'save' }}</button>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <form class="custom-logo-container" method="post" action="{{actionUrl.logoBlack}}" novalidate name="logoBlackForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
                                <input type="hidden" name="custom_asset[name]" value="logo-black-file">
                                <input name="_method" type="hidden" ng-value="methods.logoBlack">
                                <h3 class="m-l" translate>{{ 'logo_(black_background)' }}</h3>
                                <div class="custom-logo bg-dark" style="background-image: url({{customLogoBlack}});">
                                    <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-black-xs" bs-holder ng-show="!customLogoBlack" class="img-responsive">
                                    <img base-sixty-four-image="customLogoBlack" ng-show="customLogoBlack && customLogoBlack.base64">
                                    <img ng-src="{{customLogoBlack.custom_asset_file_attributes.attachment_url}}" alt="{{customLogoBlack.custom_asset_file_attributes.attachment}}" ng-show="customLogoBlack && customLogoBlack.custom_asset_file_attributes" />
                                    <div class="tools-box">
                                        <div class="btn-group">
                                            <div class="btn btn-default btn-file">
                                                <i class="fa fa-edit"></i> {{ 'change_the_logo' | translate }}
                                                <input type="file"
                                                       accept="image/png,image/x-png"
                                                       name="custom_asset[custom_asset_file_attributes][attachment]"
                                                       ng-model="customLogoBlack"
                                                       base-sixty-four-input
                                                       required />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="logoBlackForm.$invalid" translate>{{ 'save' }}</button>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <form class="custom-favicon-container" method="post" action="{{actionUrl.favicon}}" novalidate name="faviconForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
                                <input type="hidden" name="custom_asset[name]" value="favicon-file">
                                <input name="_method" type="hidden" ng-value="methods.favicon">
                                <h3 class="m-l" translate>{{ 'favicon' }}</h3>
                                <div class="custom-favicon" style="background-image: url({{customFavicon}});">
                                    <img src="data:image/png;base64," data-src="holder.js/32x32/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!customFavicon" class="img-responsive">
                                    <img base-sixty-four-image="customFavicon" ng-show="customFavicon && customFavicon.base64">
                                    <img ng-src="{{customFavicon.custom_asset_file_attributes.attachment_url}}" alt="{{customFavicon.custom_asset_file_attributes.attachment}}" ng-show="customFavicon && customFavicon.custom_asset_file_attributes" />
                                    <div class="tools-box">
                                        <div class="btn-group">
                                            <div class="btn btn-default btn-file">
                                                <i class="fa fa-edit"></i> {{ 'change_the_favicon' | translate }}
                                                <input type="file"
                                                       accept="image/png,image/x-png,image/x-icon,image/ico,image/vnd.microsoft.icon"
                                                       name="custom_asset[custom_asset_file_attributes][attachment]"
                                                       ng-model="customFavicon"
                                                       base-sixty-four-input
                                                       required />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="faviconForm.$invalid" translate>{{ 'save' }}</button>
                            </form>
                        </div>
                    </div>
                    <div class="row m-t m-l-xs">
                        <div class="col-md-4">
                            <h4 translate>{{ 'main_colour' }}</h4>
                            <form role="form" class="form-inline" name="mainColorForm" novalidate>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa fa-paint-brush"></i>
                                        </div>
                                        <input type="text" minicolors ng-model="mainColorSetting.value" class="form-control" placeholder="{{ 'primary' | translate}}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button name="button" class="btn btn-warning" ng-click="save(mainColorSetting)" translate>{{ 'save' }}</button>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4">
                            <h4 translate>{{ 'secondary_colour' }}</h4>
                            <form role="form" class="form-inline" name="secondColorForm" novalidate>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa fa-paint-brush"></i>
                                        </div>
                                        <input type="text" minicolors ng-model="secondColorSetting.value" class="form-control" placeholder="{{ 'secondary' | translate}}"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button name="button" class="btn btn-warning" ng-click="save(secondColorSetting)" translate>{{ 'save' }}</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </uib-tab>

        <uib-tab heading="{{ 'home_page' | translate }}">
          <div class="panel panel-default m-t-md">
            <div class="panel-body">
              <div class="row">
                <div class="col-md-6">
                  <h4 translate>{{ 'news_of_the_home_page' }}</h4>
                  <div ng-model="homeBlogpostSetting.value" class="well" medium-editor options='{"placeholder": "{{ "type_your_news_here" | translate }}",
                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]}'></div>
                  <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'leave_it_empty_to_not_bring_up_any_news_on_the_home_page' | translate }}</span>
                  <button name="button" class="btn btn-warning" ng-click="save(homeBlogpostSetting)" translate>{{ 'save' }}</button>
                </div>
                <div class="col-md-6">
                  <h4 translate>{{ 'twitter_stream' }}</h4>
                  <form role="form" class="form-inline" name="twitterForm" novalidate>
                    <div class="form-group">
                      <div class="input-group">
                        <div class="input-group-addon">
                          <i class="fa fa-twitter"></i>
                        </div>
                        <input type="text" ng-model="twitterSetting.value" class="form-control" placeholder="{{ 'name_of_the_twitter_account' | translate }}"/>
                      </div>
                    </div>
                    <div class="form-group">
                      <button name="button" class="btn btn-warning" ng-click="save(twitterSetting)" translate>{{ 'save' }}</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </uib-tab>

        <uib-tab heading="{{ 'about' | translate }}">
          <div class="panel panel-default m-t-md">
            <div class="panel-body">

              <div class="row m-t-lg m-b-lg">
                <div class="col-sm-offset-4 col-sm-4">
                  <h1 ng-model="aboutTitleSetting.value" medium-editor options='{"placeholder": "{{ "title_of_the_about_page" | translate }}", "disableToolbar": true, "disableReturn": false}' class="text-u-c"></h1>
                  <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'shift_enter_to_force_carriage_return' | translate }}</span>
                  <button name="button" class="btn btn-warning" ng-click="save(aboutTitleSetting)" translate>{{ 'save' }}</button>
                </div>

              </div>

              <div class="row">
                <div class="col-md-4 col-md-offset-1">
                  <div class="text-justify" ng-model="aboutBodySetting.value" medium-editor options='{"placeholder": "{{ "input_the_main_content" | translate }}",
                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]
                  }'>

                  </div>
                  <button name="button" class="btn btn-warning" ng-click="save(aboutBodySetting)" translate>{{ 'save' }}</button>
                </div>
                <div class="col-md-4 col-md-offset-2">
                  <div ng-model="aboutContactsSetting.value" medium-editor options='{"placeholder": "{{ "input_the_fablab_contacts" | translate }}",
                  "buttons": ["bold", "italic", "anchor", "header1", "header2" ]
                  }'>

                  </div>
                  <span class="help-block text-info text-xs"><i class="fa fa-lightbulb-o"></i> {{ 'shift_enter_to_force_carriage_return' | translate }}</span>
                  <button name="button" class="btn btn-warning" ng-click="save(aboutContactsSetting)" translate>{{ 'save' }}</button>
                </div>

              </div>

            </div>
          </div>
        </uib-tab>
        <uib-tab heading="{{ 'reservations' | translate }}">
            <div class="panel panel-default m-t-lg">
                <div class="panel-heading">
                    <span class="font-sbold" translate>{{ 'reservations_parameters' }}</span>
                </div>
                <div class="panel-body">
                    <div>
                        <div class="row">
                            <h3 class="m-l" translate>{{ 'confine_the_booking_agenda' }}</h3>
                            <div class="col-md-2">
                                <h4 translate>{{ 'opening_time' }}</h4>
                                <uib-timepicker ng-model="windowStart.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
                            </div>
                            <div class="col-md-4 m-t">
                                <button name="button" class="btn btn-warning m-l" ng-click="save(windowStart)" translate>{{ 'save' }}</button>
                            </div>
                            <div class="col-md-2">
                                <h4 translate>{{ 'closing_time' }}</h4>
                                <uib-timepicker ng-model="windowEnd.value" hour-step="timepicker.hstep" minute-step="timepicker.mstep" show-meridian="false"></uib-timepicker>
                            </div>
                            <div class="col-md-4 m-t">
                                <button name="button" class="btn btn-warning m-l" ng-click="save(windowEnd)" translate>{{ 'save' }}</button>
                            </div>
                        </div>
                        <div class="row">
                            <h3 class="m-l" translate>{{ 'ability_for_the_users_to_move_their_reservations' }}</h3>
                            <div class="form-group m-l">
                                <label for="enableMove" class="control-label m-r" translate>{{ 'reservations_shifting' }}</label>
                                <input bs-switch
                                       ng-model="enableMove.value"
                                       id="enableMove"
                                       type="checkbox"
                                       class="form-control"
                                       switch-on-text="{{ 'enabled' | translate }}"
                                       switch-off-text="{{ 'disabled' | translate }}"
                                       switch-animate="true"/>
                                <button name="button" class="btn btn-warning m-l" ng-click="save(enableMove)" translate>{{ 'save' }}</button>
                            </div>
                        </div>
                        <div class="row" ng-show="enableMove.value">
                            <div class="col-md-4">
                                <label for="moveDelay" class="control-label m-r" translate>{{ 'prior_period_(hours)' }}</label>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                        <input type="number" class="form-control" id="moveDelay" ng-model="moveDelay.value">
                                    </div>
                                </div>
                                <button name="button" class="btn btn-warning" ng-click="save(moveDelay)" translate>{{ 'save' }}</button>
                            </div>
                        </div>
                        <div class="row">
                            <h3 class="m-l" translate>{{ 'ability_for_the_users_to_cancel_their_reservations' }}</h3>
                            <div class="form-group m-l">
                                <label for="enableCancel" class="control-label m-r" translate>{{ 'reservations_cancelling' }}</label>
                                <input bs-switch
                                       ng-model="enableCancel.value"
                                       id="enableCancel"
                                       type="checkbox"
                                       class="form-control"
                                       switch-on-text="{{ 'enabled' | translate }}"
                                       switch-off-text="{{ 'disabled' | translate }}"
                                       switch-animate="true"/>
                                <button name="button" class="btn btn-warning m-l" ng-click="save(enableCancel)" translate>{{ 'save' }}</button>
                            </div>
                        </div>
                        <div class="row" ng-show="enableCancel.value">
                            <div class="col-md-4">
                                <label for="moveDelay" class="control-label m-r" translate>{{ 'prior_period_(hours)' }}</label>
                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">
                                            <i class="fa fa-clock-o"></i>
                                        </div>
                                        <input type="number" class="form-control" id="cancelDelay" ng-model="cancelDelay.value">
                                    </div>
                                </div>
                                <button name="button" class="btn btn-warning" ng-click="save(cancelDelay)" translate>{{ 'save' }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </uib-tab>
      </uib-tabset>
    </div>

  </div>
</section>
