<div class="modal-header">
  <h3 class="text-center red" translate>{{ 'app.admin.invoices.export_accounting_data' }}</h3>
</div>
<div class="modal-body">
  <form role="form" name="exportForm">
    <div class="row">
      <div class="form-group col-md-6">
        <label for="start_date" translate>{{ 'app.admin.invoices.export_form_date' }}</label>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
          <input type="text"
                 class="form-control"
                 name="start_date"
                 id="start_date"
                 ng-model="exportTarget.startDate"
                 uib-datepicker-popup="{{datePicker.format}}"
                 datepicker-options="datePicker.options"
                 is-open="datePicker.opened.start"
                 min-date="firstInvoice"
                 placeholder="{{datePicker.format}}"
                 ng-click="toggleDatePicker($event, 'start')"
                 required/>
        </div>
      </div>
      <div class="form-group col-md-6">
        <label for="end_date" translate>{{ 'app.admin.invoices.export_to_date' }}</label>
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
          <input type="text"
                 class="form-control"
                 name="end_date"
                 id="end_date"
                 ng-model="exportTarget.endDate"
                 uib-datepicker-popup="{{datePicker.format}}"
                 datepicker-options="datePicker.options"
                 is-open="datePicker.opened.end"
                 min-date="exportTarget.startDate || firstInvoice"
                 placeholder="{{datePicker.format}}"
                 ng-click="toggleDatePicker($event, 'end')"
                 required/>
        </div>
      </div>
    </div>
    <div class="row">
      <h4 class="control-label m-l" translate>{{ 'app.admin.invoices.export_to' }}</h4>
      <div class="form-group m-l-lg">
        <label for="acd">
          <input type="radio" name="acd" id="acd" ng-model="exportTarget.software" ng-value="'acd'" ng-click="fillSettings('acd')" required/>
          {{ 'app.admin.invoices.acd' | translate }}
        </label>
      </div>
    </div>
    <div class="row" ng-show="exportTarget.settings">
      <div class="col-md-4 font-bold" translate>{{ 'app.admin.invoices.format' }}</div>
      <div class="col-md-8">{{ exportTarget.settings.format }}</div>
      <div class="col-md-4 font-bold" translate>{{ 'app.admin.invoices.encoding' }}</div>
      <div class="col-md-8">{{ exportTarget.settings.encoding }}</div>
      <div class="col-md-4 font-bold" translate>{{ 'app.admin.invoices.separator' }}</div>
      <div class="col-md-8">{{ exportTarget.settings.separator }}</div>
      <div class="col-md-4 font-bold" translate>{{ 'app.admin.invoices.dateFormat' }}</div>
      <div class="col-md-8">
        <a href="https://apidock.com/ruby/DateTime/strftime" class="help-cursor" target="_blank">{{ exportTarget.settings.dateFormat }}</a>
      </div>
      <div class="col-md-4 font-bold" translate>{{ 'app.admin.invoices.labelMaxLength' }}</div>
      <div class="col-md-8">{{ exportTarget.settings.labelMaxLength }}</div>
      <div class="col-md-4 font-bold" translate>{{ 'app.admin.invoices.decimalSeparator' }}</div>
      <div class="col-md-8">{{ exportTarget.settings.decimalSeparator }}</div>
      <div class="col-md-4 font-bold" translate>{{ 'app.admin.invoices.exportInvoicesAtZero' }}</div>
      <div class="col-md-8" translate>{{ exportTarget.settings.exportInvoicesAtZero ? 'app.shared.buttons.yes' : 'app.shared.buttons.no' }}</div>
      <div class="col-md-4 font-bold" translate>{{ 'app.admin.invoices.columns' }}</div>
      <table class="col-md-12 export-table-template">
        <thead>
          <tr>
            <td ng-repeat="column in exportTarget.settings.columns" translate>{{ 'app.admin.invoices.exportColumns.' + column }}</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td ng-repeat="column in exportTarget.settings.columns"></td>
          </tr>
        </tbody>
      </table>
    </div>
  </form>
</div>
<div class="modal-footer">
  <form role="form" ng-submit="ok()" name="exportFormParams" method="post" action="{{ actionUrl }}" class="inline">
    <input name="authenticity_token" type="hidden" ng-value="csrfToken"/>
    <input name="_method" type="hidden" ng-value="method"/>
    <input name="extension" type="hidden" ng-value="query.extension"/>
    <input name="type" type="hidden" ng-value="exportTarget.software"/>
    <input name="key" type="hidden" ng-value="query.key"/>
    <input name="query" type="hidden" ng-value="query.query"/>
    <input type="submit" class="btn btn-warning" value="{{ 'app.shared.buttons.confirm' | translate }}" formtarget="export-frame"/>
  </form>
  <button class="btn btn-default" ng-click="cancel()" translate>{{ 'app.shared.buttons.cancel' }}</button>
</div>
