@{
    ViewData["MainNum"] = "6";
    ViewData["SubNum"] = "1";
    ViewData["Title"] = "電站資料管理";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">總覽</a></li>
    <li class="breadcrumb-item active">@ViewData["Title"]</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<!-- Your main content goes below here: -->
<div class="row">
    <div class="col-xl-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="subheader">
                        <h1 class="subheader-title"> 電站分佈區域 </h1>
                    </div>
                    <ul class="nav nav-tabs mb-5" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link fs-lg px-4 active" data-toggle="tab" href="#tab-newtaipei" role="tab">
                                <span class="hidden-sm-down ml-1">新北市</span> <span class="badge bg-primary-500 ml-2">4</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taipei" role="tab">
                                <span class="hidden-sm-down ml-1">台北市</span> <span class="badge bg-primary-500 ml-2">4</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-hsinchu" role="tab">
                                <span class="hidden-sm-down ml-1">新竹市</span> <span class="badge bg-primary-500 ml-2">4</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-miaoli" role="tab">
                                <span class="hidden-sm-down ml-1">苗栗縣</span> <span class="badge bg-primary-500 ml-2">1</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link fs-lg px-4" data-toggle="tab" href="#tab-taichung" role="tab">
                                <span class="hidden-sm-down ml-1">台中市</span> <span class="badge bg-primary-500 ml-2">3</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content p-3">
                        <div class="tab-pane fade show active" id="tab-newtaipei" role="tabpanel" aria-labelledby="tab-newtaipei">
                            <div class="row mb-5 d-flex justify-content-between">
                                <div class="col-6">
                                    <a asp-controller="PowerStation" asp-action="Edit" class="btn btn-success waves-effect waves-themed mb-3">
                                        <span class="fal fa-plus mr-1"></span>
                                        新增電站
                                    </a>
                                </div>
                                <div class="col-6 text-right">
                                    <a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-list mr-1"></span></a>
                                    <a href="javascript:;" class="btn btn-secondary btn-icon waves-effect waves-themed"><span class="fal fa-grip-horizontal mr-1"></span></a>
                                </div>
                            </div>
                            <div class="row mb-5">
                                <div class="col-xl">
                                    <div class="card border m-auto m-lg-0">
                                        <a href="0station.html">
                                            <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                        </a>
                                        <div class="card-body d-flex justify-content-between pb-0 px-2">
                                            <h4 class="font-weight-bold" style="line-height: 27px;">
                                                <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-check"></i>
                                                </a> 新竹巨城站
                                            </h4>
                                            <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-2">
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電量</p>
                                                    <p><span class="color-primary-400">185</span> kWh</p>
                                                    <p>27°C</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電金額</p>
                                                    <p><span class="color-primary-400">2,5840</span> NT</p>
                                                    <p class="small">2021-06-30</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>Pr值</p>
                                                    <p><span class="color-primary-400">90</span> %</p>
                                                    <p class="small">17:50:36</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl">
                                    <div class="card border m-auto m-lg-0">
                                        <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                        <div class="card-body d-flex justify-content-between pb-0 px-2">
                                            <h4 class="font-weight-bold" style="line-height: 27px;">
                                                <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-check"></i>
                                                </a> 新竹交大站
                                            </h4>
                                            <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-2">
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電量</p>
                                                    <p><span class="color-primary-400">185</span> kWh</p>
                                                    <p>27°C</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電金額</p>
                                                    <p><span class="color-primary-400">2,5840</span> NT</p>
                                                    <p class="small">2021-06-30</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>Pr值</p>
                                                    <p><span class="color-primary-400">65</span> %</p>
                                                    <p class="small">17:50:36</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl">
                                    <div class="card border m-auto m-lg-0">
                                        <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                        <div class="card-body d-flex justify-content-between pb-0 px-2">
                                            <h4 class="font-weight-bold" style="line-height: 27px;">
                                                <a href="javascript:void(0);" class="btn btn-warning btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-exclamation"></i>
                                                </a> 新竹動物園站
                                            </h4>
                                            <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-2">
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電量</p>
                                                    <p><span class="color-primary-400">185</span> kWh</p>
                                                    <p>27°C</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電金額</p>
                                                    <p><span class="color-primary-400">2,5840</span> NT</p>
                                                    <p class="small">2021-06-30</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>Pr值</p>
                                                    <p><span class="color-primary-400">40</span> %</p>
                                                    <p class="small">17:50:36</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl">
                                    <div class="card border m-auto m-lg-0">
                                        <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                        <div class="card-body d-flex justify-content-between pb-0 px-2">
                                            <h4 class="font-weight-bold" style="line-height: 27px;">
                                                <a href="javascript:void(0);" class="btn btn-danger btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-horizontal-rule"></i>
                                                </a> 新竹動物園站
                                            </h4>
                                            <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-2">
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電量</p>
                                                    <p><span class="color-primary-400">185</span> kWh</p>
                                                    <p>27°C</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電金額</p>
                                                    <p><span class="color-primary-400">2,5840</span> NT</p>
                                                    <p class="small">2021-06-30</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>Pr值</p>
                                                    <p><span class="color-primary-400">5</span> %</p>
                                                    <p class="small">17:50:36</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 5%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl">
                                    <div class="card border m-auto m-lg-0">
                                        <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                        <div class="card-body d-flex justify-content-between pb-0 px-2">
                                            <h4 class="font-weight-bold" style="line-height: 27px;">
                                                <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-check"></i>
                                                </a> 新竹巨城站
                                            </h4>
                                            <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-2">
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電量</p>
                                                    <p><span class="color-primary-400">185</span> kWh</p>
                                                    <p>27°C</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電金額</p>
                                                    <p><span class="color-primary-400">2,5840</span> NT</p>
                                                    <p class="small">2021-06-30</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>Pr值</p>
                                                    <p><span class="color-primary-400">90</span> %</p>
                                                    <p class="small">17:50:36</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xl">
                                    <div class="card border m-auto m-lg-0">
                                        <img src="img/card-backgrounds/cover-3-lg.png" class="card-img-top" alt="...">
                                        <div class="card-body d-flex justify-content-between pb-0 px-2">
                                            <h4 class="font-weight-bold" style="line-height: 27px;">
                                                <a href="javascript:void(0);" class="btn btn-success btn-sm btn-icon rounded-circle waves-effect waves-themed">
                                                    <i class="fal fa-check"></i>
                                                </a> 新竹交大站
                                            </h4>
                                            <p class="card-text"><i class="fal fa-cloud-sun-rain fa-2x"></i></p>
                                        </div>
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item px-2">
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電量</p>
                                                    <p><span class="color-primary-400">185</span> kWh</p>
                                                    <p>27°C</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>發電金額</p>
                                                    <p><span class="color-primary-400">2,5840</span> NT</p>
                                                    <p class="small">2021-06-30</p>
                                                </div>
                                                <div class=" d-flex justify-content-between">
                                                    <p>Pr值</p>
                                                    <p><span class="color-primary-400">65</span> %</p>
                                                    <p class="small">17:50:36</p>
                                                </div>
                                            </li>
                                        </ul>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-info" role="progressbar" style="width: 65%;" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl"></div>
                                <div class="col-xl"></div>
                                <div class="col-xl"></div>
                                <div class="col-xl"></div>

                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-taipei" role="tabpanel" aria-labelledby="tab-taipei">
                            <div class="row mb-5">
                                此處放台北市數據
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-hsinchu" role="tabpanel" aria-labelledby="tab-hsinchu">
                            <div class="row mb-5">
                                此處放新竹市數據
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-miaoli" role="tabpanel" aria-labelledby="tab-miaoli">
                            <div class="row mb-5">
                                此處放苗栗縣數據
                            </div>
                        </div>

                        <div class="tab-pane fade" id="tab-taichung" role="tabpanel" aria-labelledby="tab-taichung">
                            <div class="row mb-5">
                                此處放台中市數據
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts{
    <script>

        $(function () {
        });

    </script>
}