<form>
    <table class="data-table data-table-flexbox">
        <thead>
        <tr>
            <th colspan="2">
                {{header}}
            </th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{type}}
                    </span>
                    <span class="field-container-field field-type"></span>
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{id}}
                    </span>
                    <span class="field-container-field field-id"></span>
                </label>
            </td>
        </tr>
        <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="{{customIcon}}">
                        {{customIcon}}
                    </span>
                    <input name="icon"
                           class="field-container-field"
                           data-qui="controls/projects/project/media/Input"
                    />
                </label>
                <div class="field-container-item-desc">
                    {{{customIconDesc}}}
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <table class="data-table data-table-flexbox shipping-rules">
        <thead style="display: table-header-group;">
        <tr>
            <th>
                {{shippingRulesHeader}}
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td style="height: 300px; padding: 0;"></td>
        </tr>
        </tbody>
    </table>

    <table class="data-table data-table-flexbox">
        <thead>
        <tr>
            <th colspan="2">
                {{usageAssignment}}
            </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">
                        {{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">
                        {{usageAssignmentAreas}}
                    </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>
        <tr>
            <td>
                <label class="field-container">
                    <span class="field-container-item">
                        {{paymentUsage}}
                    </span>
                    <span class="field-container-field field-container-field-no-padding">
                        <input type="text" name="payments"
                               data-qui="package/quiqqer/payments/bin/backend/controls/Select"
                        />
                    </span>
                </label>
            </td>
        </tr>
        </tbody>
    </table>
</form>