<script type="text/x-template" id="about-page">
    <div class="content-inner about-page">
        <div class="row">
            <div class="col">
                <img src="assets/banner.png" alt="Cider Logo" style="display:block;margin:0 auto;width: 500px;">
                <p style="text-align: center"> {{$root.getLz('about.thanks')}} </p>

                <p style="text-align: center">"{{$root.getLz('term.appleMusic')}}" - {{$root.getLz('term.copyright')}} © 2022 <a href="https://www.apple.com/" class="dt-footer__link"
                                                                                  target="_blank"
                                                                                  rel="noopener" data-dt-link-to-exclude="">{{$root.getLz('term.appleInc')}}</a>
                                                                                  {{$root.getLz('term.rightsReserved')}}</p>
                <hr>
                <h3>{{$root.getLz('term.sponsor')}}</h3>
                <button onclick="window.open('https://ko-fi.com/cryptofyre')" class="md-btn sponsorBtn"><img src="./assets/ko_fi.svg"/>Ko-fi</button>
                <button onclick="window.open('https://opencollective.com/ciderapp')" class="md-btn sponsorBtn"><img src="./assets/open_collective.svg"/>Open Collective</button>
                <h3>{{$root.getLz('term.socials')}}</h3>
                <button onclick="window.open('https://discord.gg/applemusic')" class="md-btn sponsorBtn"><img src="./assets/discord.svg"/>{{$root.getLz('term.discord')}}</button>

            </div>
            <div class="col">
                <div class="row">
                    <div class="col">
                        <h3>{{$root.getLz('term.ciderTeam')}}</h3>
                        <button class="md-btn teamBtn" @click="window.open(member.link)" v-for="member in team">
                            <img :src="member.avatar"/>
                            <div class="row" style="width:100%;">
                                <div class="col" style="text-align: left">
                                    {{ member.name }}
                                </div>
                                <div class="col-auto">
                                    <b>{{ member.role }}</b>
                                </div>
                            </div>
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <h3></h3>
                        <h3>{{$root.getLz('term.contributors')}}</h3>
                        <img class="md-contributors"
                             style="cursor:pointer;width:100%;"
                             onclick="window.open('https://github.com/ciderapp/Cider/graphs/contributors')"
                             src="https://contrib.rocks/image?repo=ciderapp/Cider"/>
                    </div>
                </div>

            </div>
        </div>
    </div>
</script>
<script>
    Vue.component('about-page', {
        template: '#about-page',
        data: function () {
            return {
                window: window,
                team: [
                    {
                        name: 'cryptofyre',
                        link: 'https://github.com/cryptofyre',
                        role: app.getLz('term.developer'),
                        avatar: 'https://avatars.githubusercontent.com/u/33162551?v=4'
                    },
                    {
                        name: 'Core',
                        link: 'https://github.com/coredev-uk',
                        role: app.getLz('term.developer'),
                        avatar: 'https://avatars.githubusercontent.com/u/64542347?v=4'
                    },
                    {
                        name: 'Quacksire',
                        link: 'https://github.com/quacksire',
                        role: app.getLz('term.developer'),
                        avatar: 'https://avatars.githubusercontent.com/u/19170969?v=4'
                    },
                    {
                        name: 'booploops',
                        link: 'https://github.com/booploops',
                        role: app.getLz('term.developer'),
                        avatar: 'https://avatars.githubusercontent.com/u/49113086?v=4'
                    },
                    {
                        name: 'vapormusic',
                        link: 'https://github.com/vapormusic',
                        role: app.getLz('term.developer'),
                        avatar: 'https://avatars.githubusercontent.com/u/27716185?v=4'
                    },
                    {
                        name: 'Void',
                        link: 'https://twitter.com/MoonyVoid',
                        role: app.getLz('term.socialTeam'),
                        avatar: 'https://pbs.twimg.com/profile_images/1226463559472816129/8LScNYED_400x400.jpg'
                    },
                    {
                        name: 'NoseySG',
                        link: 'https://twitter.com/noah_grose',
                        role: app.getLz('term.socialTeam'),
                        avatar: 'https://pbs.twimg.com/profile_images/1422541289837535239/qg-aaoP9_400x400.jpg'
                    }
                ]
            }
        },
        methods: {

        }
    });
</script>