<form action="" name="create-rule">
    <table class="data-table data-table-flexbox">
        <thead>
        <tr>
            <th>
                {{generalHeader}}
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{title}}
                    </span>
                    <span class="field-container-field shipping-title"></span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{workingTitle}}
                    </span>
                    <span class="field-container-field shipping-workingTitle"></span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item" title="{{calculationBasis}}">
                        {{calculationPriority}}
                    </span>
                    <input type="number" name="priority" class="field-container-field"/>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item" title="{{discountDescription}}">
                        {{discountTitle}}
                    </span>
                    <span class="field-container-field field-container-field-no-padding">
                        <select name="discount_type" class="field-container-field"
                                style="width: 100%"
                        >
                            <option value="0">
                                {{discountAbsolute}}
                            </option>
                            <option value="1">
                                {{discountPercentage}}
                            </option>
                            <option value="PERCENTAGE_ORDER">
                                {{discountPercentageOrder}}
                            </option>
                        </select>
                        <div style="border-top: 1px solid rgba(147, 128, 108, 0.25)">
                            <input type="number"
                                   step="0.01"
                                   name="discount"
                                   data-qui="package/quiqqer/erp/bin/backend/controls/elements/PriceCalcInput"
                            />
                        </div>
                    </span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item" title="{{statusDescription}}">
                        {{statusTitle}}
                    </span>
                    <span class="field-container-field field-shipping-rules"></span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item" title="{{noRulesTitle}}">
                        {{noRulesTitle}}
                    </span>
                    <span class="field-container-field field-shipping-rules">
                        <input type="checkbox" name="no_rule_after"/>
                         {{noRulesText}}
                    </span>
                </label>
            </td>
        </tr>
        </tbody>
    </table>

    <table class="unit-table data-table data-table-flexbox">
        <thead>
        <tr>
            <th>
                {{unitHeader}}
            </th>
        </tr>
        </thead>
        <tr>
            <td>
                <span class="fa fa-spinner fa-spin"></span>
            </td>
        </tr>
        <tbody>
        </tbody>
    </table>

    <table class="data-table data-table-flexbox usage-table">
        <thead>
        <tr>
            <th>
                <div class="data-table-toggle"></div>
                <div class="data-table-text">
                    {{usageHeader}}
                </div>
            </th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        <span class="fa fa-calendar"></span>
                        {{usageFrom}}
                    </span>
                    <input type="datetime-local" name="date_from" class="field-container-field"/>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        <span class="fa fa-calendar"></span>
                        {{usageTo}}
                    </span>
                    <input type="datetime-local" name="date_until" class="field-container-field"/>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{usageAmountOf}}
                    </span>
                    <input type="number" min="0" name="purchase_quantity_from" class="field-container-field"/>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{usageAmountTo}}
                    </span>
                    <input type="number" min="0" name="purchase_quantity_until" class="field-container-field"/>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        <span class="fa fa-money"></span>
                        {{usageValueOf}}
                    </span>
                    <input type="number"
                           step="0.01"
                           min="0"
                           name="purchase_value_from"
                           class="field-container-field"
                           data-qui="package/quiqqer/erp/bin/backend/controls/elements/PriceCalcInput"
                    />
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        <span class="fa fa-money"></span>
                        {{usageValueTo}}
                    </span>
                    <input type="number"
                           step="0.01"
                           min="0"
                           name="purchase_value_until"
                           class="field-container-field"
                           data-qui="package/quiqqer/erp/bin/backend/controls/elements/PriceCalcInput"
                    />
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{usageAssignmentUser}}
                    </span>
                    <span class="field-container-field field-container-field-no-padding">
                        <input type="text" name="user_groups"
                               data-qui="controls/usersAndGroups/Select"
                        />
                    </span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{usageAssignmentArea}}
                    </span>
                    <span class="field-container-field field-container-field-no-padding">
                        <input type="text" name="areas"
                               data-qui="package/quiqqer/areas/bin/controls/Select"
                        />
                    </span>
                </label>
            </td>
        </tr>
        </tbody>
    </table>

    <table class="data-table data-table-flexbox product-table">
        <thead>
        <tr>
            <th>
                <div class="data-table-toggle"></div>
                <div class="data-table-text">
                    {{productHeader}}
                </div>
            </th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{usageAssignmentProduct}}
                    </span>
                    <span class="field-container-field field-container-field-no-padding">
                        <input type="text" name="articles"
                               data-qui="package/quiqqer/products/bin/controls/products/Select"
                        />
                    </span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{usageAssignmentCategory}}
                    </span>
                    <span class="field-container-field field-container-field-no-padding">
                        <input type="text" name="categories"
                               data-qui="package/quiqqer/products/bin/controls/categories/Select"
                        />
                    </span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{usageAssignmentProductOnly}}
                    </span>
                    <span class="field-container-field">
                        <input type="checkbox" name="articles_only"/>
                        {{usageAssignmentProductOnlyText}}
                    </span>
                </label>

                <div class="field-container-item-desc">
                    {{usageAssignmentProductOnlyDesc}}
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</form>
