{% extends 'components/base_nhncloud.html' %}
{% load static %}
{% block main_area %}

<section>
<div class="container">
    <div class="row justify-content-between">
        <div class="col-lg-4 text-warning">
            <h2 class="text-dark mt-5">NHN Cloud</h2>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">사용전 주의 사항</h6>
                    <a class="btn btn-warning float-left text-white" href="/nhncloud/preparations" target="_blank">Preparations</a>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">VPC 조회 및 삭제</h6>
                    <a class="btn btn-primary float-left" href="/nhncloud/infoVpcListRequest">Network Info</a>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">VPC 및 Public Subnet 구성</h6>
                    <a class="btn btn-primary float-left" href="/nhncloud/createVpcRequest">CreateNetwork</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 text-warning">
            <h2 class="text-dark mt-5">NKS Cluster</h2>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">NHN Cloud Kubernetes Cluster 생성</h6>
                    <div class="row">
                        <div class="col-lg-6">
                            <a class="btn btn-primary float-left" href="/nhncloud/createClusterOnlyRequest">Cluster Only</a>
                        </div>
                        <div class="col-lg-6">
                            <a class="btn btn-danger text-white float-left" href="/nhncloud/createClusterRequest">Cluster + VPC</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">Kubernetes Cluster Info</h6>
                    <a class="btn btn-primary float-left" href="/nhncloud/infoClusterListRequest">Cluster List Info</a>
                </div>
            </div>
            
        </div>
        <div class="col-lg-4 text-warning">
            <h2 class="text-dark mt-5">NKS Components</h2>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">Ingress LoadBalancer Deploy</h6>
                    <div class="row">
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">View</a>
                        </div>
                        <div class="col-lg-4">
                            <a class="btn btn-info float-left" href="/nhncloud/applyClusterLbRequest">Deploy</a>
                        </div>
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">Sample Pod Deploy</h6>
                    <div class="row">
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">View</a>
                        </div>
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">Deploy</a>
                        </div>
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">개발 예정</h6>
                    <a class="btn btn-dark float-left" href="#">개발 예정</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row justify-content-between">
        <div class="col-lg-4 text-warning">
            <h2 class="text-dark mt-5">Storage</h2>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">Object Storage</h6>
                    <div class="row">
                        <div class="col-lg-4">
                            <a class="btn btn-primary float-left" href="/nhncloud/infoObjectStorageRequest">View</a>
                        </div>
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">Create</a>
                        </div>
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">empty</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">Block Storage</h6>
                    <div class="row">
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">View</a>
                        </div>
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">Deploy</a>
                        </div>
                        <div class="col-lg-4">
                            <a class="btn btn-dark float-left" href="#">Delete</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">NFS</h6>
                    <a class="btn btn-dark text-whitefloat-left" href="#">API 기능 없음</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 text-warning">
            <h2 class="text-dark mt-5">...</h2>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">개발 예정</h6>
                    <a class="btn btn-dark float-left" href="#">개발 예정</a>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">개발 예정</h6>
                    <a class="btn btn-dark float-left" href="#">개발 예정</a>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">개발 예정</h6>
                    <a class="btn btn-dark float-left" href="#">개발 예정</a>
                </div>
            </div>
        </div>
        <div class="col-lg-4 text-warning">
            <h2 class="text-dark mt-5">...</h2>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">개발 예정</h6>
                    <a class="btn btn-dark float-left" href="#">개발 예정</a>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">개발 예정</h6>
                    <a class="btn btn-dark float-left" href="#">개발 예정</a>
                </div>
            </div>
            <div class="card mt-1">
                <div class="card-body">
                    <h6 class="text-dark">개발 예정</h6>
                    <a class="btn btn-dark float-left" href="#">개발 예정</a>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

{% endblock %}