{% extends 'base.html' %}
{% load i18n %}
{% block title %}{% trans "Cluster Status" %}{% endblock %}

{% block page_header %}
  {% include "horizon/common/_page_header.html" with title=_("Crushmap") %}
    <link href="{{ STATIC_URL }}dashboard/css/crushmap.css" rel="stylesheet">
    <link href="{{ STATIC_URL }}dashboard/css/zTreeStyle.css" rel="stylesheet">
{% endblock page_header %}

{% block main %}
    {% csrf_token %}
    <div id="divFramework">
        <div id="divCrushmap">
            <div id="divCrushmapTree" class="ztree"></div>
        </div>

        <div id="divStorageGroupTable">
            <table id="storage_group_list" class="table table-bordered table-striped datatable tablesorter tablesorter-default">
                    <thead>
                        <tr class="table_caption">
                            <th class="table_header" colspan="7" data-column="0">
                                <h3 class="table_title">{% trans "Storage Group List" %}</h3>
                                <div class="table_actions clearfix">
                                    <button href="#" title="Add Storage Group" class="btn btn-default  btn-primary" onclick="addAction()">{% trans "Add Storage Group" %}</button>
                                </div>
                            </th>
                        </tr>
                        <tr class="tablesorter-headerRow">
                            <th class="multi_select_column tablesorter-header sorter-false" data-column="0" tabindex="0">
                                <div class="tablesorter-header-inner">
                                    <input type="checkbox" class="table-row-multi-select" onclick="SelectAllCheckBox(this)">
                                </div>
                            </th>
                            <th class="sortable normal_column tablesorter-header" data-column="1" tabindex="0">
                                <div class="tablesorter-header-inner">{% trans "Name" %}</div>
                            </th>
                            <th class="sortable normal_column tablesorter-header" data-column="2" tabindex="0">
                                <div class="tablesorter-header-inner">{% trans "Class" %}</div>
                            </th>
                            <th class="sortable normal_column tablesorter-header" data-column="3" tabindex="0">
                                <div class="tablesorter-header-inner">{% trans "Friendly Name" %}</div>
                            </th>
                            <th class="sortable normal_column tablesorter-header" data-column="3" tabindex="0">
                                <div class="tablesorter-header-inner">{% trans "Take Name(Choose Type, Type Number)" %}</div>
                            </th>
                            <th class="sortable normal_column tablesorter-header" data-column="3" tabindex="0">
                                <div class="tablesorter-header-inner">{% trans "Marker" %}</div>
                            </th>
                            <th class="sortable normal_column" data-column="3" tabindex="0">
                                <div class="tablesorter-header-inner">{% trans "Action" %}</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {%for sg in sg_list %}
                        <tr class="odd" data-object-id='{{sg.id}}' id="storage_group_list__row__{{sg.id}}">
                            <td class="multi_select_column">
                                <input class="table-row-multi-select" name="object_ids" type="checkbox" value="{{sg.id}}" onclick="MarkTree()">
                            </td>
                            <td class="sortable normal_column name">
                                {{sg.name}}
                            </td>
                            <td class="sortable normal_column class">
                                {{sg.storage_class}}
                            </td>
                            <td class="sortable normal_column friendly_name">
                                {{sg.friendly_name}}
                            </td>
                            <td class="sortable normal_column take">
                                {%for take in sg.take_list%}
                                    {{take.name}}({{take.choose_type}},{{take.choose_num}})
                                    <input type="hidden" name="{{take.id}}" class="take-id" value="{{take.id}}"/>
                                    <input type="hidden" name="{{take.id}}" class="take-name" value="{{take.name}}"/>
                                    <input type="hidden" name="{{take.id}}" class="type-name" value="{{take.choose_type}}"/>
                                    <input type="hidden" name="{{take.id}}" class="take-num" value="{{take.choose_num}}"/>
                                    <br/>
                                {%endfor%}
                            </td>
                            <td class="sortable normal_column marker">
                                <svg width="16" height="16">
                                    <circle class="marker-circle" cx="8" cy="8" r="8" fill="{{sg.marker}}" />
                                </svg>
                            </td>
                            <td class="actions_column">
                                <button href="#" class="btn btn-default btn-primary" onclick="updateAction({{sg.id}})">Edit</button>
                            </td>
                        </tr>
                        {%endfor%}
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="7" data-column="0">
                                <span class="table_count">Displaying {{ sg_list | length }} item</span> 
                            </td> 
                        </tr>
                    </tfoot>
                </table>
        </div>

        <div id="divStorageGroupForm" style="display:none">
            <div id="divBaseForm">
                <div id="divStorageGroupFormLeft">
                    <div class="control-group form-field clearfix required">
                        <label>{% trans "Name" %}:</label>
                        <span class="required-star">*</span>
                        <span class="help-block"></span>
                        <div class="input">
                            <input id="txtName" maxlength="255"  type="text" class="form-control" onchange="ChangeName(this.vlaue)">
                        </div>
                    </div>
                    <div class="control-group form-field clearfix required">
                        <label>{% trans "Class" %}:</label>
                        <span class="required-star">*</span>
                        <span class="help-block"></span>
                        <div class="input" style="position: relative;width: 280px;height: 40px;">
                            <select id="selClass"  class="form-control" style="z-index:88;" onchange="ChangeStorageClass(this.value)">
                                {% for sg in sg_list %}
                                    <option value="{{sg.storage_class}}">{{sg.storage_class}}</option>
                                {%endfor %}
                            </select>
                            <input id="txtClass" class="form-control" style="z-index:99;position: absolute;width: 250px;height: 30px;top: 1px;left: 2px;border: none;" type="text" value="" >
                        </div>
                    </div>
                </div>
                <div id="divStorageGroupFormRight">
                    <div class="control-group form-field clearfix required">
                        <label>{% trans "Friendly Name" %}:</label>
                        <span class="required-star">*</span>
                        <span class="help-block"></span>
                        <div class="input">
                          <input id="txtFriendlyName" maxlength="255" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="control-group form-field clearfix required">
                        <label>{% trans "Marker" %}:</label>
                        <span class="required-star">*</span>
                        <span class="help-block"></span>
                        <div class="input">
                            <input id="txtMarker" maxlength="24" type="color" class="form-control" value="#cccccc" />
                        </div>
                    </div>
                </div>
            </div>

            <div id="divTakeFrom">
                <div class="control-group form-field clearfix required" >
                    <label>{% trans "Take" %}:</label>
                    <span class="help-block"></span>
                    <table id="tTakeList">
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="divFormOptions" class="vsm-options-bar">
                <button id="btnAddStorageGroup" class="btn btn-primary" onclick="PostAction('create')">{% trans "Add" %}</button>
                <button id="btnUpdateStorageGroup" class="btn btn-primary" style="display:none" onclick="PostAction('update')">{% trans "Update" %}</button>

            </div>
        </div>
    </div>
{% endblock %}
{% block js %}
    {{ block.super }}
    <script src='{{ STATIC_URL }}dashboard/js/vsm.spin.js' type='text/javascript' charset='utf-8'></script>
    <script src="{{ STATIC_URL }}dashboard/js/jquery.ztree.all-3.5.min.js"></script>
    <script src="{{ STATIC_URL }}dashboard/js/crushmap.js"></script> 
{% endblock %}
