<div id="item-attributes-form-modal" class="modal modal-fixed-footer" style="max-height: 100%" <%=(App.rtl ? 'style="direction:rtl"' : '' ) %>
    <div></div>
    <div class="modal-content">
        <div id="item-attributes-form-content">
            <div style="padding-bottom: 50px">
                <h4 style="font-size: 1.2rem">{Literal}Item Attributes{/Literal}</h4>
            </div>
            <form>
                <div class="row">
                    <div class="col s12">
                        <div class="col s12 m6">
                            <div class="input-field">
                                <label class="active" for="attributeNumber">{Literal}Id{/Literal}</label>
                                <input disabled id="attributeNumber" name="attributeNumber" type="text"
                                    value="<%= itemAttributes.id %>" class="materialize-textarea"></input>
                                <span class="helper-text"
                                    data-error="{Literal}This field can't be empty or contain special characters{/Literal}"></span>
                            </div>
                        </div>

                        <table style="width: 75%;" class="highlight attributes-table table-no-border-lines">
                            <thead>
                                <tr style="font-weight: 600;">
                                    <td>{Literal}SKU Component{/Literal}</td>
                                    <td>{Literal}Description Component{/Literal}</td>
                                    <td class="input-field">
                                        <a class="btn-floating btn-small waves-effect waves-light"
                                            onclick="App.itemAttributesView.addAttribute()">
                                            <i class="material-icons">add</i><span></span>
                                        </a>
                                    </td>
                                </tr>
                            </thead>

                            <tbody>
                                <% _.each(itemAttributes.attributes, function(attribute) { %>
                                    <tr>
                                        <td class="input-field">
                                            <input name="skuComponent" type="text" value="<%= attribute.skuComponent %>"
                                                class="materialize-textarea skuComponent"></input>
                                            <span class="helper-text"
                                                data-error="{Literal}This field must be unique and can't be empty or contain special characters{/Literal}"></span>
                                        </td>
                                        <td class="input-field">
                                            <input name="descriptionComponent" type="text"
                                                value="<%= attribute.descriptionComponent %>"
                                                class="materialize-textarea descriptionComponent"
                                                maxlength="250"></input>
                                            <span class="helper-text"
                                                data-error="{Literal}This field can't be empty or contain special characters{/Literal}"></span>
                                        </td>
                                        <td><a class="btn-floating btn-small waves-effect waves-light red"
                                                onclick="App.itemAttributesView.removeAttribute(this)">
                                                <i class="material-icons">remove</i></a>
                                        </td>
                                    </tr>
                                    <% }); %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>
        </div>
    </div>

<div class="modal-footer">
        <a href="javascript:void(0)"
            class="waves-effect waves-green btn green left save-button">{Literal}Save{/Literal}</a>
        <a href="javascript:void(0)"
            class="modal-close waves-effect waves-light left btn-flat">{Literal}Cancel{/Literal}</a>
    </div>
</div>


<div id="delete-item-attributes-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div style="padding-bottom: 50px;">
            <h6>{Literal}Confirm Deletion{/Literal}</h6>
        </div>
        <p>{Literal}Are you sure that you would like to remove this Item Attributes{/Literal}?</p>
    </div>
    <div class="modal-footer">
        <a href="javascript:void(0)" id="delete-item-attributes-confirm" class="waves-effect waves-light btn red left"
            data-item-attributes-id="<%= itemAttributes.name %>">{Literal}Delete{/Literal}</a>
        <input type="hidden" id="delete-item-attributes-id" />
        <a href="javascript:void(0)"
            class="modal-close waves-effect waves-light btn-flat left">{Literal}Cancel{/Literal}</a>
    </div>
</div>