{% extends "layout.html" %}

{% block content %}

<ol class="breadcrumb">
    <li><a href="{{ url_for('account_view') }}">Account</a></li>
    <li><a href="{{ url_for('subscription_view', subscription_id=subscription_id) }}">{{subscription_id}}</a></li>
    <li class="active">{{resource_group_name}}</li>
</ol>

<h3>Storage Accounts</h3>
<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th class="col-sm-3">Name</th>
            <th class="col-sm-2">Location</th>
            <th class="col-sm-2">Provisioning State</th>
            <th class="col-sm-2">Account Type</th>
            <th class="col-sm-1"><a href="#" class="btn btn-sm btn-success" data-toggle="modal" data-target="#newstorageaccount">New...</a></th>
        </tr>
    </thead>
    <tbody>
        {% for account in model.storage_accounts %}
        <tr data-account-name="{{account.name}}">
            <td><a href="{{ url_for('storageaccount_view', subscription_id=subscription_id, resource_group_name=resource_group_name, account_name=account.name) }}">{{account.name}}</a></td>
            <td>{{account.location}}</td>
            <td>{{account.provisioning_state}}</td>
            <td>{{account.account_type}}</td>
            <td><a href="#" class="btn btn-sm btn-danger" data-toggle="modal" data-account-name="{{account.name}}" data-target="#deletestorageaccount">Delete...</a></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<h3>Virtual Machines</h3>
<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th class="col-sm-3">Name</th>
            <th class="col-sm-2">Location</th>
            <th class="col-sm-2">Provisioning State</th>
            <th class="col-sm-2">Size</th>
            <th class="col-sm-1"></th>
        </tr>
    </thead>
    <tbody>
        {% for vm in model.vms %}
        <tr data-vm-name="{{vm.name}}">
            <td><a href="{{ url_for('vm_view', subscription_id=subscription_id, resource_group_name=resource_group_name, vm_name=vm.name) }}">{{vm.name}}</a></td>
            <td>{{vm.location}}</td>
            <td>{{vm.provisioning_state}}</td>
            <td>{{vm.hardware_profile.virtual_machine_size}}</td>
            <td></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<h3>Virtual Networks</h3>
<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th class="col-sm-3">Name</th>
            <th class="col-sm-2">Location</th>
            <th class="col-sm-2">Provisioning State</th>
            <th class="col-sm-2"></th>
            <th class="col-sm-1"></th>
        </tr>
    </thead>
    <tbody>
        {% for network in model.virtual_networks %}
        <tr data-virtual-network-name="{network.name}}">
            <td><a href="{{ url_for('virtual_network_view', subscription_id=subscription_id, resource_group_name=resource_group_name, network_name=network.name) }}">{{network.name}}</a></td>
            <td>{{network.location}}</td>
            <td>{{network.provisioning_state}}</td>
            <td></td>
            <td></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<h3>Public IP Addresses</h3>
<table class="table table-striped table-condensed">
    <thead>
        <tr>
            <th class="col-sm-3">Name</th>
            <th class="col-sm-2">Location</th>
            <th class="col-sm-2">Provisioning State</th>
            <th class="col-sm-2">IP Address</th>
            <th class="col-sm-1"></th>
        </tr>
    </thead>
    <tbody>
        {% for ip in model.public_ip_addresses %}
        <tr data-public-ip-address-name="{ip.name}}">
            <td>{{ip.name}}</td>
            <td>{{ip.location}}</td>
            <td>{{ip.provisioning_state}}</td>
            <td>{{ip.ip_address}}</td>
            <td></td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- Create Storage Account modal dialog -->
<div class="modal fade" id="newstorageaccount" tabindex="-1" role="dialog" aria-labelledby="newstorageaccount" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">New Storage Account</h4>
            </div>
            <div class="modal-body">
                <h3>Account Information</h3>
                <form name="create">
                    <div class="form-group">
                        <label for="newaccountname">Name</label>
                        <input type="text" name="newaccountname" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="newaccountlocation">Location</label>
                        <select name="newaccountlocation" class="form-control">
                            {% for loc in model.storage_accounts_locations %}
                            <option value="{{loc}}">{{loc}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="newaccounttype">Account Type</label>
                        <select name="newaccounttype" class="form-control">
                            <option value="Standard_LRS">Standard LRS</option>
                            <option value="Standard_ZRS">Standard ZRS</option>
                            <option value="Standard_GRS">Standard GRS</option>
                            <option value="Standard_RAGRS">Standard RAGRS</option>
                            <option value="Premium_LRS">Premium LRS</option>
                        </select>
                    </div>
                    <input type="hidden" name="newaccountresourcegroup" value="{{resource_group_name}}">
                    <input type="hidden" name="newaccountsubscriptionid" value="{{subscription_id}}">
                </form>
                <br />
                <div class="alert alert-info" role="alert" id="createstatus" style="display:none;"><p>Status Message Goes Here</p></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" id="newaccountsubmit">Create</button>
                <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Storage Account modal dialog -->
<div class="modal fade" id="deletestorageaccount" tabindex="-1" role="dialog" aria-labelledby="deletestorageaccount" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Delete Storage Account</h4>
            </div>
            <div class="modal-body">
                <h3>Confirm Deletion</h3>
                <p>Enter the name of the storage account to proceed with deletion.</p>
                <form name="delete">
                    <div class="form-group">
                        <label for="deleteoriginalname">Account Name</label>
                        <input type="text" name="deleteoriginalname" class="form-control" readonly>
                    </div>
                    <div class="form-group">
                        <label for="deleteconfirmedname">Confirmed Account Name</label>
                        <input type="text" name="deleteconfirmedname" class="form-control">
                    </div>
                    <input type="hidden" name="deleteresourcegroup" value="{{resource_group_name}}">
                    <input type="hidden" name="deletesubscriptionid" value="{{subscription_id}}">
                </form>
                <br />
                <div class="alert alert-danger" role="alert" id="deletestatus" style="display:none;"><p>Incorrect account name</p></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" id="deletesubmit">Delete</button>
                <button type="button" class="btn btn-default" id="close" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}

<script>
$(function () {
    $('#deletestorageaccount').on('show.bs.modal', function(e) {
        var accountName = $(e.relatedTarget).data('account-name');
        $(e.currentTarget).find('input[name="deleteoriginalname"]').val(accountName);
        $(e.currentTarget).find('input[name="deleteconfirmedname"]').val('');
        $("#deletestatus").hide();
    });

    $('#deletestorageaccount').on('shown.bs.modal', function (e) {
        $(e.currentTarget).find('input[name="deleteconfirmedname"]').focus();
    });

    $('#newstorageaccount').on('show.bs.modal', function (e) {
        $(e.currentTarget).find('input[name="newaccountname"]').val('');
        $("#createstatus").hide();
        $("#newaccountsubmit").show();
    });

    $('#newstorageaccount').on('shown.bs.modal', function (e) {
        $(e.currentTarget).find('input[name="newaccountname"]').focus();
    });

    function displayStatus(result) {
        var s = $("#createstatus");
        s.hide();
        s.removeAttr('class');
        s.addClass('alert');
        if (result.code == 200) {
            s.addClass('alert-success');
        } else if (result.code >= 400) {
            s.addClass('alert-danger');
        }
        else {
            s.addClass('alert-info');
        }
        s.html(result.status);
        s.show();
    }

    function updateStatus(subscription_id, result_link) {
        ajax_data = {
            subscriptionid: subscription_id,
            operationStatusLink: result_link,
        };
        $.ajax({
            type: "GET",
            url: "/getcreatestorageaccountstatus",
            data: ajax_data,
            success: function (result) {
                displayStatus(result);
            },
            error: function () {
                alert("failure to get status");
            }
        });
    }

    $("button#newaccountsubmit").click(function () {
        displayStatus({ code: 0, status: 'In progress' })
        var subscriptionid = $('input[name="newaccountsubscriptionid"]').val()
        var resourcegroup = $('input[name="newaccountresourcegroup"]').val();
        var name = $('input[name="newaccountname"]').val();
        var location = $('select[name="newaccountlocation"]').val().replace(' ', '').toLowerCase();
        var accounttype = $('select[name="newaccounttype"]').val();
        $.ajax({
            type: "POST",
            url: "/createstorageaccount",
            data: {
                subscriptionid: subscriptionid,
                resourcegroup: resourcegroup,
                name: name,
                location: location,
                accounttype: accounttype,
            },
            success: function(result) {
                $("#newaccountsubmit").hide();
                displayStatus(result);
                if (result.operationStatusLink) {
                    updateStatus(subscriptionid, result.operationStatusLink);
                    var intervalId = setInterval(function () {
                        updateStatus(subscriptionid, result.operationStatusLink);
                    }, 2000);
                    $("button#close").click(function () {
                        clearInterval(intervalId);
                        $("button#close").unbind('click');
                        window.location.reload();
                    });
                }
            },
            error: function(){
                alert("Failed to create storage account.");
            }
        });
    });

    $("button#deletesubmit").click(function () {
        var subscriptionid = $('input[name="deletesubscriptionid"]').val();
        var resourcegroup = $('input[name="deleteresourcegroup"]').val();
        var originalname = $('input[name="deleteoriginalname"]').val();
        var confirmedname = $('input[name="deleteconfirmedname"]').val();
        if (confirmedname != originalname) {
            $("#deletestatus").show();
        } else {
            $("#deletestatus").hide();
            $.ajax({
                type: "POST",
                url: "/deletestorageaccount",
                data: {
                    resourcegroup: resourcegroup,
                    subscriptionid: subscriptionid,
                    name: originalname,
                },
                success: function (result) {
                    $("#deletestorageaccount").modal('hide');
                    $("tr[data-account-name = '" + originalname + "']").remove();
                },
                error: function () {
                    alert("Failed to delete storage account.");
                }
            });
        }
    });
});
</script>

{% endblock %}
