using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using System.Collections.Generic;
using Microsoft.AspNetCore.Http;

namespace MvcExplorer.Controllers
{
    public partial class AccordionController : Controller
    {
        // GET: Index
        public ActionResult Index(IFormCollection collection)
        {
            return View();
        }
    }
}

<c1-accordion id="mvcAccordion">
    <div>
        <!-- pane -->
        <div class="main-pane">
            <!-- header -->
            Accordion
            <div class="desc">
                Change the properties of this Accordion.
            </div>
        </div>
        <div>
            <!-- content -->
            <div class="wj-labeled-input switch">
                <input id="showIcons" type="checkbox" checked />
                <label for="showIcons">
                    ShowIcons <span>Show icon in the pane headers</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="autoSwitch" type="checkbox" checked />
                <label for="autoSwitch">
                    AutoSwitch <span>Expand panes when selecting with the keyboard</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="isAnimated" type="checkbox" checked />
                <label for="isAnimated">
                    IsAnimated <span>Animate pane collapse/expand</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="allowCollapseAll" type="checkbox" />
                <label for="allowCollapseAll">
                    AllowCollapseAll <span>Can collapse all panes</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="allowExpandMany" type="checkbox" />
                <label for="allowExpandMany">
                    AllowExpandMany <span>Can expand multiple panes</span>
                </label>
            </div>
        </div>
    </div>

    <div>
        <!-- pane -->
        <div>
            <!-- header -->
            Connection
            <div class="desc">
                Wi-Fi, Mobile, Data usage, and Hotspot
            </div>
        </div>
        <div>
            <!-- content -->
            <div class="wj-labeled-input switch">
                <input id="wifi" type="checkbox" checked />
                <label for="wifi">
                    Wi-Fi <span>Turn Wi-fi on or off</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="mobiledata" type="checkbox" />
                <label for="mobiledata">
                    Mobile Data <span>Turn Mobile data on or off</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="bluetooth" type="checkbox" checked />
                <label for="bluetooth">
                    Bluetooth <span>Turn Bluetooth on or off</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="apmode" type="checkbox" />
                <label for="apmode">
                    Airplane Mode <span>Turn Airplane mode on or off</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="hotspot" type="checkbox" />
                <label for="hotspot">
                    Hot Spot &amp; Tethering <span>Hotspot on, Tethering</span>
                </label>
            </div>
        </div>
    </div>

    <div>
        <!-- pane -->
        <div>
            <!-- header -->
            Connected Devices
            <div class="desc">
                Bluetooth, NFC
            </div>
        </div>
        <div>
            <!-- content -->
            <div class="wj-labeled-input switch">
                <input id="dev1" type="checkbox" checked />
                <label for="dev1">
                    Gear Fit2 Pro <span>Health monitor</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="dev2" type="checkbox" />
                <label for="dev2">
                    SYNC <span>Car connection</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="dev3" type="checkbox" />
                <label for="dev3">
                    Samsung XT-9343 <span>TV</span>
                </label>
            </div>
            <button class="btn btn-primary">
                See More...
            </button>
        </div>
    </div>

    <div>
        <!-- pane -->
        <div>
            <!-- header -->
            Apps &amp; Notifications
            <div class="desc">
                Recent apps, Default apps, Block, Allow
            </div>
        </div>
        <div>
            <!-- content -->
            <div class="wj-labeled-input switch">
                <input id="app-chrome" type="checkbox" />
                <label for="app-chrome">
                    Chrome <span>Web browser</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="app-outlook" type="checkbox" />
                <label for="app-outlook">
                    Outlook <span>Mail and schedule</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="app-fb" type="checkbox" checked />
                <label for="app-fb">
                    Facebook <span>Social media</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="app-twitter" type="checkbox" />
                <label for="app-twitter">
                    Twitter <span>Social media</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="app-teams" type="checkbox" checked />
                <label for="app-teams">
                    Teams <span>Chat, Meetings, Calling, Collaboration</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="app-skype" type="checkbox" />
                <label for="app-skype">
                    Skype <span>Chat, Meetings, Calling, Collaboration</span>
                </label>
            </div>
            <button class="btn btn-primary">
                See More...
            </button>
        </div>
    </div>

    <div>
        <!-- pane -->
        <div>
            <!-- header -->
            Battery
            <div class="desc">
                <span style="color:orangered">39%</span> - Should last until about 7:35 PM
            </div>
        </div>
        <div>
            <!-- content -->
            <div class="wj-labeled-input switch">
                <input id="bat-sav" type="checkbox" checked />
                <label for="bat-sav">
                    Battery Saver <span>Slow down to reduce battery usage</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="bat-adapt" type="checkbox" />
                <label for="bat-adapt">
                    Adaptive Battery <span>Detect when apps drain battery</span>
                </label>
            </div>
            <div class="wj-labeled-input switch">
                <input id="bat-pct" type="checkbox" />
                <label for="bat-pct">
                    Battery Percentage <span>Show battery percentage</span>
                </label>
            </div>
        </div>
    </div>
</c1-accordion>

@section Styles{
    <style type="text/css">
        /* Accordion: */
        /* customize the labeled inputs */
        .wj-labeled-input {
            width: 30%;
        }

            .wj-labeled-input > label > span {
                display: block;
                font-weight: normal;
                font-size: 90%;
                opacity: .90;
                color: black;
            }
    </style>
}

@section Scripts{
    <script>
        c1.documentReady(function () {
            let acc = wijmo.Control.getControl("#mvcAccordion");
            link(acc, 'showIcons');
            link(acc, 'autoSwitch');
            link(acc, 'isAnimated');
            link(acc, 'allowCollapseAll');
            link(acc, 'allowExpandMany');
        });
        function link(acc, id) {
            let cb = document.getElementById(id);
            acc[id] = cb.checked;
            cb.addEventListener('click', function(e) {
                acc[id] = cb.checked;
            });
        }
    </script>
}

@section Summary{
    <p>@Html.Raw(AccordionRes.Index_Text0)</p>
}

@section Description{
    <p>@Html.Raw(AccordionRes.Index_Text1)</p>
}