{% extends "_base.html" %}

{% block body %}
<div class="background-image" id="app">
    <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">
            <div class="login-border">

                <template v-if="!userId">
                    <a href="/user/login">
                        <i class="fa fa-unlock" aria-hidden="true"></i>
                        Login with Patreon to unlock features
                    </a>
                    <a href="https://www.patreon.com/bePatron?c=278915">
                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                    </a>
                </template>
                <template v-else>
                    <a>Hey, <i class="fa fa-user-o" aria-hidden="true"></i> {{ fullName }}</a>
                    <a href="/user/logout"><i class="fa fa-power-off" aria-hidden="true"></i></a>
                </template>

            </div>
        </div>
    </div>

    <div class="main" v-if="!showModal" v-cloak>
        <div class="main-border shadow">
            <div class="input-border">
                <input v-model="link"
                       @keyup.enter="submit"
                       type="text"
                       placeholder="paste your link here"
                       spellcheck="false"
                       autofocus />

                <div class="arrow-button">
                    <a href="#" id="get-link" @click="submit">
                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
            </div>

            <div class="controls">
                <div class="controls-icon">
                    <template v-if="locked">
                        <a href="https://www.patreon.com/bePatron?c=278915" class="black">
                            <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>
                        </a>
                    </template>
                    <template v-else>
                        <i class="fa fa-wrench" aria-hidden="true"></i>
                    </template>
                </div>

                <div :class="{ locked: locked }">

                    <div class="switch-field">
                        <div class="switch-title">format </div>
                        <input type="radio" id="type_video" value="video" name="episode_format" v-model="format" :disabled="locked" />
                        <label for="type_video">video</label>
                        <input type="radio" id="type_audio" value="audio" name="episode_format" v-model="format" :disabled="locked" />
                        <label for="type_audio">audio</label>
                    </div>

                    <div class="switch-field">
                        <div class="switch-title">quality </div>
                        <input type="radio" id="quality_low" value="low" name="episode_quality" v-model="quality" :disabled="locked" />
                        <label for="quality_low">low</label>
                        <input type="radio" id="quality_high" value="high" name="episode_quality" v-model="quality" :disabled="locked" />
                        <label for="quality_high">high</label>
                    </div>

                    <div class="switch-field">
                        <div class="switch-title">episode count </div>
                        <input type="radio" id="page_50" value="50" name="page_count" v-model.number="count" :disabled="locked" />
                        <label for="page_50">50</label>
                        <input type="radio" id="page_100" value="100" name="page_count" v-model.number="count" :disabled="locked" />
                        <label for="page_100">100</label>
                        <input type="radio" id="page_150" value="150" name="page_count" v-model.number="count" :disabled="locked" />
                        <label for="page_150">150</label>
                        <input type="radio" id="page_600" value="600" name="page_count" v-model.number="count" :disabled="locked || !allow600pages" />
                        <label for="page_600" :class="{ locked: !locked && !allow600pages }">600</label>
                    </div>

                </div>
            </div>
        </div>
    </div>

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

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

    <!-- Modal dialog -->
    <div v-cloak v-if="showModal" class="modal">
        <input type="url" v-model="feedLink" ref="output" readonly />
        <div class="modal-links">
            <span v-if="canCopy">
                <a id="modal-copy" href="#" @click="copyLink">
                    <i class="fa fa-clone" aria-hidden="true"></i>
                    Copy
                </a>
            </span>

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

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

    <div class="footer">
        <div class="footer-links">
            <a href="./faq.html"><i class="fa fa-question-circle" aria-hidden="true"></i></a>
            <a href="https://twitter.com/pod_sync"><i class="fa fa-twitter" aria-hidden="true"></i></a>
        </div>
    </div>
</div>
{% endblock %}