<div class="row">
    <div class="col-sm-8">
        <form id="supplier-product-add-edit-form">
                <div ng-if="isAddAction()" class="form-group product-group">
                    <label for="country-id">{{'suppliers.tables.headers.country' | translate}}:</label>
                    <select id="country-id"
                            class="form-control-static"
                            ng-model="data.idCountry"
                            required>
                        <option ng-repeat="countryInfo in countries" value={{countryInfo.id}}>
                            {{countryInfo.name}}
                        </option>
                    </select>
                </div>

                <div ng-if="isAddAction()" class="form-group product-group">
                    <label for="supplier-id">{{'suppliers.tables.headers.supplierName' | translate}}:</label>
                    <select id="supplier-id"
                            class="form-control-static"
                            ng-model="data.idSupplier"
                            required>
                        <option ng-repeat="supplier in suppliers" value={{supplier.id}}>
                            {{supplier.name}}
                        </option>
                    </select>
                </div>

                <div class="form-group product-group">
                    <label for="product-name">{{'suppliers.tables.headers.name' | translate}}:</label>
                    <input class="form-control product-input"
                        type="text"
                        placeholder="{{'suppliers.tables.headers.name' | translate}}"
                        id="product-name"
                        ng-model="data.name"
                        value="{{data.name}}"
                        required>
                </div>

                <div ng-if="!isAddAction()" class="form-group product-group">
                    <label for="product-is-available">{{'suppliers.tables.headers.isAvailable' | translate}}:</label>
                    <div class="product-radio-layer">
                        <input class="product-radio"
                            type="radio"
                            id="product-is-available-yes"
                            ng-model="data.isAvailable"
                            value="1">
                        {{'suppliers.headers.YES' | translate}}
                    </div>
                    <div class="product-radio-layer">
                        <input class="product-radio"
                            type="radio"
                            id="product-is-available-no"
                            ng-model="data.isAvailable"
                            value="0">
                        {{'suppliers.headers.NO' | translate}}
                    </div>
                </div>

                <div class="form-group product-group">
                    <label for="product-descrtiption">{{'suppliers.tables.headers.description' | translate}}:</label>
                    <textarea class="form-control product-input"
                        placeholder="{{'suppliers.tables.headers.description' | translate}}"
                        id="product-description"
                        ng-model="data.description"
                        required>{{data.description}}</textarea>
                </div>

            <div class="form-group product-group">
                <label for="product-category-name">{{'suppliers.tables.headers.category' | translate}}:</label>
                <select id="product-category-name"
                        class="form-control-static"
                        ng-model="data.productCategory"
                        ng-options="productCategory.category for productCategory in productCategories track by productCategory.id"
                        required>
                </select>
            </div>

                <div class="form-group product-group">
                    <label for="product-is-price-recurring">{{'suppliers.tables.headers.isPriceRecurring' | translate}}:</label>
                    <div class="product-radio-layer">
                        <input class="product-radio"
                            type="radio"
                            id="product-is-price-recurring-yes"
                            ng-model="data.isPriceRecurring"
                            value="1">
                        {{'suppliers.headers.YES' | translate}}
                    </div>
                    <div class="product-radio-layer">
                        <input class="product-radio"
                            type="radio"
                            id="product-is-price-recurring-no"
                            ng-model="data.isPriceRecurring"
                            value="0">
                        {{'suppliers.headers.NO' | translate}}
                    </div>
                </div>

                <div ng-if="isPriceRecurring()" class="form-group product-group">
                    <label for="product-pay-period">{{'suppliers.tables.headers.payPeriod' | translate}}:</label>
                    <input class="form-control product-input"
                        type="text"
                        placeholder="{{'suppliers.tables.headers.payPeriod' | translate}}"
                        id="product-pay-period"
                        ng-model="data.payPeriod"
                        value="{{data.payPeriod}}">
                </div>

                <div class="form-group product-group">
                    <label for="product-unit-cost-price">{{'suppliers.tables.headers.unitCostPrice' | translate}}:</label>
                    <input class="form-control product-input"
                        type="text"
                        placeholder="{{'suppliers.tables.headers.unitCostPrice' | translate}}"
                        id="product-unit-cost-price"
                        ng-model="data.unitCostPrice"
                        value="{{data.unitCostPrice}}"
                        required>
                </div>

                <div class="form-group product-group">
                    <label for="product-unit-vat-cost">{{'suppliers.tables.headers.unitVatCost' | translate}}:</label>
                    <input class="form-control product-input"
                        type="text"
                        placeholder="{{'suppliers.tables.headers.unitVatCost' | translate}}"
                        id="product-unit-vat-cost"
                        ng-model="data.unitVatCost"
                        value="{{data.unitVatCost}}"
                        required>
                </div>

                <div class="form-group product-group">
                    <label for="product-manufacturere-no">{{'suppliers.tables.headers.manufacturerProductNo' | translate}}:</label>
                    <input class="form-control product-input"
                        type="text"
                        placeholder="{{'suppliers.tables.headers.manufacturerProductNo' | translate}}"
                        id="product-manufacturere-no"
                        ng-model="data.manufacturerProductNo"
                        value="{{data.manufacturerProductNo}}"
                        required>
                </div>

                <div class="form-group product-group">
                    <label for="product-supplier-no">{{'suppliers.tables.headers.supplierProductNo' | translate}}:</label>
                    <input class="form-control product-input"
                        type="text"
                        placeholder="{{'suppliers.tables.headers.supplierProductNo' | translate}}"
                        id="product-supplier-no"
                        ng-model="data.supplierProductNo"
                        value="{{data.supplierProductNo}}"
                        required>
                </div>

                <div class="form-group product-group">
                    <label for="product-unit">{{'suppliers.tables.headers.unit' | translate}}:</label>
                    <input class="form-control product-input"
                        type="text"
                        placeholder="{{'suppliers.tables.headers.unit' | translate}}"
                        id="product-unit"
                        ng-model="data.unit"
                        value="{{data.unit}}">
                </div>

                <button type="submit" ng-click="addEditSupplierProducts()" class="btn btn-primary">{{'suppliers.buttons.SUPPLIERS_PRODUCTS_'+formAction | translate}}</button>
        </form>
    </div>

    <div ng-if="!isAddAction()" class="col-sm-4">
        <h4>Upload Product Documents</h4>
        <upload-product-document ng-controller="uploadProductDocumentCtrl" ng-init="getDocumentTypes()"/>
    </div>
</div>
