{% extends "base.html" %}
{% block head %}
        {{ super() }}

        <!-- BEGIN PAGE LEVEL STYLES -->
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='global/plugins/jquery-multi-select/css/multi-select.css') }}"/>
        <!-- BEGIN THEME STYLES -->

        <!-- BEGIN THEME STYLES -->
        <!-- DOC: To use 'rounded corners' style just load 'components-rounded.css' stylesheet instead of 'components.css' in the below style tag -->
        <link href="{{ url_for('static', filename='global/css/components-md.css') }}" id="style_components" rel="stylesheet" type="text/css"/>
        <link href="{{ url_for('static', filename='global/css/plugins-md.css') }}" rel="stylesheet" type="text/css"/>
        <link href="{{ url_for('static', filename='admin/layout2/css/layout.css') }}" rel="stylesheet" type="text/css"/>
        <link href="{{ url_for('static', filename='admin/layout2/css/themes/grey.css') }}" rel="stylesheet" type="text/css" id="style_color"/>
        <link href="{{ url_for('static', filename='admin/layout2/css/custom.css') }}" rel="stylesheet" type="text/css"/>
        <!-- END THEME STYLES -->
{% endblock %}
{% block title %}<title>DNS Control Panel - Domain Management</title>{% endblock %}

{% block dashboard_stat %}
                <!-- BEGIN PAGE HEADER-->
                <h3 class="page-title">
                Admin Console</h3>
                <div class="page-bar">
                    <ul class="page-breadcrumb">
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="{{ url_for('dashboard') }}">Home</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li>
                            <a href="{{ url_for('admin') }}">Admin Console</a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li>
                            <a href="#">Domain Management</a>
                        </li>
                    </ul>
                </div>
                <!-- END PAGE HEADER-->
{% endblock %}

{% block content %}
                <div class="clearfix">
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN ACCESS CONTROL -->
                        <div class="portlet box red-sunglo">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-globe"></i>Domain Access Control
                                </div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse">
                                    </a>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <form method="post" action="{{ url_for('domain_management', domain_name=domain.name) }}" class="form-horizontal form-row-seperated">
                                    <div class="form-body">
                                        <div class="form-group">
                                            <label class="control-label col-md-3">Move users from left to right to grant them access to the domain <strong>{{ domain.name }}.</strong><br/><br/>
                                            Users with <font color="red">red</font> color is in Administrator role, no need to grant permission.
                                            </label>
                                            <div class="col-md-9">
                                                <select multiple="multiple" class="multi-select" id="domain_multi_user" name="domain_multi_user[]">
                                                {% for user in users %}
                                                    <option {% if user.id in domain_user_ids %}selected{% endif %} value="{{ user.username }}" {% if user.role.name == 'Administrator' %}style="color:red"{% endif %}>{{ user.username}}
                                                    </option>
                                                {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                        <div class="row">
                                            <div class="col-md-offset-3 col-md-9">
                                                <button type="submit" class="btn green"><i class="fa fa-check"></i> Save</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>
                        <!-- END ACCESS CONTROL -->
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <!-- BEGIN DOMAIN DELETION -->
                        <div class="portlet box red-sunglo">
                            <div class="portlet-title">
                                <div class="caption">
                                    <i class="fa fa-globe"></i>Domain Deletion
                                </div>
                                <div class="tools">
                                    <a href="javascript:;" class="collapse">
                                    </a>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <p>This function is used to remove a domain completely from Database and PowerDNS. All records and user privileges which associated to this domain be removed also. Your change <font color="red">cannot be reverted</font>. Please be careful with your action!</p>
                                <div class="form-actions">
                                    <div class="row">
                                        <div class="col-md-offset-3 col-md-9">
                                            <button type="button" class="btn red" id="delete_domain" value="{{ domain.name}}"><i class="fa fa-times"></i> DELETE DOMAIN {{ domain.name }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- END DOMAIN DELETION -->
                    </div>
                </div>
{% endblock %}

{% block scripts %}
{{ super() }}
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/select2/select2.min.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='global/plugins/jquery-multi-select/js/jquery.multi-select.js') }}"></script>
<script src="{{ url_for('static', filename='global/plugins/bootbox/bootbox.min.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="{{ url_for('static', filename='global/scripts/metronic.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='admin/layout2/scripts/layout.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='admin/pages/scripts/components-dropdowns.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='admin/pages/scripts/my-button-action.js') }}" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<script>
jQuery(document).ready(function() {    
   Metronic.init(); // init metronic core componets
   Layout.init(); // init layout
   ComponentsDropdowns.init();
   MyButtonAction.init();
});
</script>
<!-- END JAVASCRIPTS -->
{% endblock %}