<div id="maintext" class="tab-pane" style="width:99%;overflow:hidden;">
  <ul class="nav nav-tabs moduledata_tabs">
    <h5><strong>Multi-lingual settings:</strong></h5>
    {% for language in languages %}
    <li {{ loop.first ? 'class="active"' }}><a href="#maintab-{{ loop.index0 }}-{{ language.language_id }}" data-toggle="tab"><img src="{{ language.flag_url }}"/> {{ language.name }}</a></li>
    {% endfor %}
  </ul>
  <div class="tab-content">
    {% for language in languages %}
    <div id="maintab-{{ loop.index0 }}-{{ language.language_id }}" language-id="{{ language.language_id }}" class="row-fluid tab-pane language {{ loop.first ? 'active' }}">
      <div class="row">
        <div class="col-md-3">
          <h5><strong>Page Title:</strong></h5>
          <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Enter the page title here.</span>
        </div>
        <div class="col-md-4">
          <input placeholder="Page title" type="text" class="form-control" name="{{ moduleName }}[PageTitle][{{ language.language_id }}]" value="{{ moduleData.PageTitle[language.language_id] ?: "Thank you for your order!" }}" />
        </div>
      </div>
      <hr />
      <div class="row">
        <div class="col-md-3">
          <h5><strong>Page Text:</strong></h5>
          <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Enter the page text here. You can use the following short codes:<br /><br />{first_name} - First name<br />{last_name} - Last name<br />{order_id} - Order ID<br />{customer_email} - Customer Email<br /><br /><i class="fa fa-info-circle"></i>&nbsp;Make sure to use the short codes below if you offer discounts to the customers:<br /><br />{discount_code} - Discount code<br />{discount_value} - Discount value<br />{total_amount} - Total amount<br />{date_end} - End date of coupon validity</span>
        </div>
        <div class="col-md-8">
          <textarea id="PageText_{{ language.language_id }}" class="form-control" name="{{ moduleName }}[PageText][{{ language.language_id }}]">
            {{ moduleData.PageText[language.language_id] != '' ? moduleData.PageText[language.language_id] : 
            'Hello, {first_name} {last_name}! Thank you for purchasing from our store. Your order ID is: <span style="font-weight: bold;">{order_id}</span> and we\'ve sent you order confirmation email to <span style="font-weight: bold;">{customer_email}</span>.' }}
          </textarea>
        </div>
      </div>
      <br/>
      <div class="row">
        <div class="col-md-3">
          <h5><strong>Select date format for the end date of coupon validity:</strong></h5>
        </div>
        <div class="col-md-4">
          <select name="{{ moduleName }}[DateFormat]" class="form-control">
            <option value="d-m-Y" {{ moduleData.DateFormat == 'd-m-Y' ? 'selected' }}>dd-mm-yyyy</option>
            <option value="m-d-Y" {{ moduleData.DateFormat == 'm-d-Y' ? 'selected' }}>mm-dd-yyyy</option>
            <option value="Y-m-d" {{ moduleData.DateFormat == 'Y-m-d' ? 'selected' }}>yyyy-mm-dd</option>
            <option value="Y-d-m" {{ moduleData.DateFormat == 'Y-d-m' ? 'selected' }}>yyyy-dd-mm</option>
          </select>
        </div>
      </div>
      <hr />
    </div>
    {% endfor %}
  </div>
  <br />
  <div class="row">
    <div class="col-md-3">
      <h5><strong>Offer discount to the customers:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Choose if you want to offer a discount to the customers.</span>
    </div>
    <div class="col-md-4">
      <select id="DiscountChecker" name="{{ moduleName }}[DiscountType]" class="form-control">
        <option value="N" {{ moduleData.DiscountType == "N" ? "selected" }}>No discount</option>
        <option value="P" {{ moduleData.DiscountType == "P" ? "selected" }}>Percentage</option>
        <option value="F" {{ moduleData.DiscountType == "F" ? "selected" }}>Fixed amount</option>
      </select>
    </div>
  </div>
  <div class="discountSettings">
    <hr />
    <div class="row">
      <div class="col-md-3">
        <h5><strong>Discount:</strong></h5>
        <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Enter the discount percent or value.</span>
      </div>
      <div class="col-md-4">
        <div class="input-group">
          <input type="text" class="form-control" name="{{ moduleName }}[Discount]" value="{{ moduleData.Discount ?: '10' }}">
          <span class="input-group-addon">
            <span style="display:none;" id="currencyAddon">{{ currency }}</span><span style="display:none;" id="percentageAddon">%</span>
          </span>
        </div>
      </div>
    </div>
    <hr />
    <div class="row">
      <div class="col-md-3">
        <h5><strong>Total amount:</strong></h5>
        <span class="help"><i class="fa fa-info-circle"></i>&nbsp;The total amount that must reached before the coupon is valid.</span>
      </div>
      <div class="col-md-4">
        <div class="input-group">
          <input type="text" class="form-control" name="{{ moduleName }}[TotalAmount]" value="{{ moduleData.TotalAmount ?: '20' }}">
          <span class="input-group-addon">{{ currency }}</span>
        </div>
      </div>
    </div>
    <hr />
    <div class="row">
      <div class="col-md-3">
        <h5><strong>Discount validity:</strong></h5>
        <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Define how many days the discount code will be active after sending the reminder.</span>
      </div>
      <div class="col-md-4">
        <div class="input-group">
          <input type="text" class="form-control" value="{{ moduleData.DiscountValidity|number_format ?: 7 }}" name="{{ moduleName }}[DiscountValidity]">
          <span class="input-group-addon">days</span>
        </div>
      </div>
    </div>
  </div>    
  <hr />
  <div class="row">
    <div class="col-md-3">
      <h5><strong>Show AddThis sharing buttons:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Shows the AddThis sharing buttons on the success page.</span>
    </div>
    <div class="col-md-4">
      <select id="OrderSharingChecker" name="{{ moduleName }}[AddThisShow]" class="form-control">
        <option value="yes" {{ moduleData.AddThisShow == 'yes' ? 'selected' }}>{{ text_enabled }}</option>
        <option value="no"  {{ moduleData.AddThisShow != 'yes' ? 'selected' }}>{{ text_disabled }}</option>
      </select>
    </div>
  </div>
  <div class="row addthisurl">
    <hr />
    <div class="col-md-3">
      <h5><strong>URL to use for the AddThis sharing buttons:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Specify the url which you would like to share.</span>
    </div>
    <div class="col-md-4">
      <input type="text" class="form-control" name="{{ moduleName }}[AddThisURL]" value="{{ moduleData.AddThisURL ?: HTTP_CATALOG }}" />
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-md-3">
      <h5><strong>Custom CSS:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Enter your custom CSS here...<br /><br />
    </div>
    <div class="col-md-4">
      <textarea rows="5" name="{{ moduleName }}[CustomCSS]" placeholder="Custom CSS" class="form-control">{{ moduleData.CustomCSS ?: '' }}</textarea>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-md-3">
      <h5><strong>Custom JavaScipt:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;You can use the custom JavaScript code for tracking system and etc...<br /><br />THe following short-codes are available:<br /><br />{order_id} - Order ID<br />{order_total} - Order total
    </div>
    <div class="col-md-4">
      <textarea rows="5" name="{{ moduleName }}[CustomJS]" placeholder="Custom JavaScript code" class="form-control">{{ moduleData.CustomJS ?: '' }}</textarea>
    </div>
  </div>
  <hr />
</div>
