@using Podsync.Helpers
@{
    var enableFeatures = User.EnablePatreonFeatures();
}

<div class="title">
    <h1>Podsync</h1>
    
    <h2>
        Simple and free service that lets you listen to any YouTube or 
        Vimeo channels, playlists or user videos in podcast format.
    </h2>

    <div class="login-block">
        @if (User.Identity.IsAuthenticated)
        {
            <p>
                Yo, <i class="fa fa-user-circle" aria-hidden="true"></i> @User.GetName() ( <a href="~/logout"><i class="fa fa-sign-out" aria-hidden="true"></i>logout</a>)
            </p>
        }
        else
        {
            <h5>
                <a href="~/login">
                    Login with Patreon to unlock features
                    <i class="fa fa-question-circle master-tooltip" aria-hidden="true" title="We have added advanced features for those who supported development. Login with your Patreon account to unlock them.">
                    </i>
                </a>
            </h5>
        }
    </div>
</div>

<div class="main">
    <div class="main-border shadow">
        <div class="input-border">
            <input id="url-input" type="url" placeholder="paste your link here" spellcheck="false" autofocus />
            <div class="arrow-button">
                <a href="#" id="get-link">
                    <i class="fa fa-arrow-right" aria-hidden="true"></i>    
                </a>
            </div>
        </div>

        <div class="controls">
            <p>
                @if (enableFeatures)
                {
                    <i class="fa fa-wrench" aria-hidden="true"></i>
                }
                else
                {
                    <i class="fa fa-question-circle master-tooltip"
                       aria-hidden="true"
                       title="This features are available for patrons only. You may support us and unlock this features"></i>
                }

                <span id="control-panel" class="@(!enableFeatures ? "locked" : "")">
                    Selected format <a class="selected-option" id="video-format">video</a> <a id="audio-format">audio</a>,
                    quality <a class="selected-option" id="best-quality">best</a> <a id="worst-quality">worst</a>,
                </span>

                <span class="locked" style="text-decoration: line-through">
                    <i class="fa fa-question-circle master-tooltip" title="Still under development. We will keep you updated via Patreon's news feed" aria-hidden="true"></i>
                    episode count <a class="selected-option">50</a> <a>100</a> <a>150</a>
                </span>
            </p>
        </div>
    </div>
</div>

<div class="man"></div>

<div>
    <a href="https://www.patreon.com/podsync" target="_blank">
        <img class="patreon shadow" width="400" src="img/become_patreon.png" alt="Become my patron on Patreon" />
    </a>
</div>

<div class="modal" id="modal" style="display: none">
    <input type="url" id="output-input" readonly />
    <div class="modal-links">
        <span>
            <a id="modal-copy" href="#">
                <i class="fa fa-clone" aria-hidden="true"></i>
                Copy
            </a>
        </span>

        <span>
            <a id="modal-open" href="#" target="_blank">
                <i class="fa fa-external-link" aria-hidden="true"></i>
                Open
            </a>
        </span>

        <span>
            <a id="close-modal" href="#">
                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                Close
            </a>
        </span>
    </div>
</div>