{extends file="admin-layout.tpl"}

{block name="page-title"}{intl l='Thelia Product Attributes'}{/block}

{block name="check-permissions"}admin.configuration.product_attributes.view{/block}

{block name="main-content"}
<div class="attributes">

    <div id="wrapper" class="container">

        <ul class="breadcrumb">
            <li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
            <li><a href="{url path='/admin/configuration'}">{intl l="Configuration"}</a></li>
            <li><a href="{url path='/admin/configuration/product_attributes'}">{intl l="Product attributes"}</a></li>
        </ul>

        <div class="row">
            <div class="col-md-12">
                <form action="#" method="post">
	                <div class="general-block-decorator">
	                    <table class="table table-striped table-condensed table-left-aligned">
	                        <caption>
	                           {intl l='Thelia product attributes'}
	           
                                <a class="btn btn-default btn-primary action-btn" title="{intl l='Add a new product attribute'}" href="#add_product_attribute_dialog" data-toggle="modal">
                                    <span class="glyphicon glyphicon-plus-sign"></span>
                                </a>
	                        </caption>
                            <thead>
                                <tr>
                                    <th>{intl l="Title"}</th>
                                    <th>{intl l="Position"}</th>
                                    <th>{intl l="Actions"}</th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td>Title here</td>
                                    <td>1</td>
                                    <td class="actions">
                                        <div class="btn-group">
                                            <a class="btn btn-default btn-xs message-change" title="{intl l='Change this product attribute'}" href="{url path='/admin/configuration/product_attributes/update' product_attribute_id="$ID"}"><span class="glyphicon glyphicon-edit"></span></a>
                                            
                                            <a class="btn btn-default btn-xs message-delete" title="{intl l='Delete this mailing template'}" href="#delete_product_attribute_dialog" data-id="{$ID}" data-toggle="modal"><span class="glyphicon glyphicon-trash"></span></a>
                                        </div>
                                    </td>
                                </tr>

                                <!-- <tr>
                                <td colspan="3">
                                <div class="alert alert-info">
                                {intl l="No product attribute has been created yet. Click the + button to create one."}
                                </div>
                                </td>
                                </tr> -->

                            </tbody>
	                    </table>
	                </div>
                </form>
            </div>
        </div>

    </div>
</div>


{* Adding a new message *}

<div class="modal fade" id="add_product_attribute_dialog" tabindex="-1" role="dialog" aria-hidden="true">
    
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>{intl l="Create a new product attribute"}</h3>
            </div>

            
            <form method="POST" action="">

                <div class="modal-body">

                    <div class="alert alert-danger" id="add_procut_attribute_dialog_error">Error message</div>
                        
                    <div class="form-group has-error">
                        <label for="{$label_attr.for}" class="control-label">{intl l="Title"} : </label>
                        <input type="text" id="{$label_attr.for}" required="required" name="{$name}" value="{$value}" title="{intl l='Mailing template name'}" placeholder="{intl l='Mailing template name'}" class="form-control">
                    </div>

                    <div class="checkbox">
                        <label>
                            <input type="checkbox">
                            Add this attribute to all sections
                        </label>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span> {intl l="Cancel"}</button>
                    <button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span> {intl l="Create this product attribute"}</button>
                </div>

            </form>

        </div>
    </div>
</div>


{* Delete confirmation dialog *}

<div class="modal fade" id="delete_product_attribute_dialog" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>{intl l="Delete a product attribute"}</h3>
            </div>

            <div class="modal-body">
                <p>{intl l="Do you really want to delete this product attribute ?"}</p>
            </div>

            <form method="post" action="">
                <!-- <input type="hidden" name="message_id" id="message_delete_id" value="" /> -->

        	    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span> {intl l="No"}</button>
                    <button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span> {intl l="Yes"}</button>
        	    </div>
            </form>

        </div>
    </div>
</div>
{/block}