<div class="modal fade" id="modalKeywordLink" tabindex="-1" role="dialog" aria-labelledby="modalKeywordLink"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="border-radius: 5px;">
            <div class="modal-header" style="padding: 8px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                <h4 class="modal-title">
                    Detail keyword Links
                </h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="inputAnchortext">Anchortext</label>
                    <input ng-model="currentKeywordLink.keyword" id="inputAnchortext" type="text" class="form-control">
                </div>

                <div class="form-group">
                    <label for="inputTitleAnchortext">Title Anchortext</label>
                    <input ng-model="currentKeywordLink.title" id="inputTitleAnchortext" type="text" class="form-control">
                </div>

                <div class="form-group">
                    <label for="inputUrl">URL</label>
                    <input ng-model="currentKeywordLink.link" id="inputUrl" type="url" class="form-control">
                </div>

                <div class="form-group">
                    <label for="inputNumberOfReplace">Priority</label>
                    <input min="1" value="1" ng-model="currentKeywordLink.priority" style="width: 100px" type="number" class="form-control">
                </div>

                <div class="form-group">
                    <label for="inputNumberOfReplace">Number Of Replacement</label>
                    <input min="1" ng-model="currentKeywordLink.auto" style="width: 100px" id="inputNumberOfReplace" type="number" class="form-control">
                </div>

                <div class="form-flex">
                    <div class="form-group">
                        <label for="inputStatus">Status</label>
                        <select class="form-control" style="width: auto" ng-model="currentKeywordLink.status" id="inputStatus">
                            <option value="enable">Enable</option>
                            <option value="disable">Disable</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="">Category</label>
                        <select {{-- ng-disabled="state.mode == 'edit'"  --}} ng-model="currentKeywordLink.category.id" style="width: auto" name="cars" id="cars" class="form-control">
                            <option value="-2">Blog</option>
                            <option value="-1">Product</option>
                            <option value="-3">Landing Page</option>
                            <option value="-4">Tag Page</option>
                            <option value="-5">Homepage</option>
                            <optgroup label="Product Categories">
                                <option ng-repeat="category in productCategories" value="@{{ category.id }}">@{{ category.name }}</option>
                            </optgroup>
                            <optgroup label="Post Categories">
                                <option ng-repeat="category in postCategories" value="@{{ category.id }}">@{{ category.name }}</option>
                            </optgroup>
                        </select>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btnSaveKeywordLink" 
                    ng-click="save()"
                    ng-disabled="state.loading">Save</button>
            </div>
        </div>
    </div>
</div>
