<div class="planaday">
    <h1>Support</h1>

    <pad-script data-script="Tabs"/>
    <div class="pad-tabs" style="display: none;">
        <ul>
            <if-pad-cssConverterFirst>
                <li><a href="#pad-style-converter-{{pad-uniqueId}}"><pad-translate>Oude CSS Updaten</pad-translate></a></li>
            </if-pad-cssConverterFirst>

            <li><a href="#pad-support-manual-{{pad-uniqueId}}"><pad-translate>Handleiding</pad-translate></a></li>

            <li><a href="#pad-support-shortcodes-{{pad-uniqueId}}"><pad-translate>Shortcodes</pad-translate></a></li>

            <if-not-pad-cssConverterFirst>
                <li><a href="#pad-style-converter-{{pad-uniqueId}}"><pad-translate>Oude CSS Updaten</pad-translate></a></li>
            </if-not-pad-cssConverterFirst>

            <li><a href="#pad-support-string-{{pad-uniqueId}}"><pad-translate>Supportstring</pad-translate></a></li>

            <li><a href="#pad-support-sql-{{pad-uniqueId}}"><pad-translate>Database Query</pad-translate></a></li>
        </ul>
        <div id="pad-support-manual-{{pad-uniqueId}}">
            <h2><pad-translate>Handleiding & meer informatie</pad-translate></h2>

            <h3><pad-translate>In het kort:</pad-translate></h3>
            <ol>
                <li><pad-translate>Maak een pagina aan voor een cursusoverzicht met bijvoorbeeld: </pad-translate><b>[{{pad-prefix}}-courselistblock start=now end=+4months]</b></li>
                <li><pad-translate>Maak een pagina aan en zet hierin de shortcode: <b>[{{pad-prefix}}-course]</b>. Op deze pagina zal dan de gekozen cursus worden getoond.</pad-translate></li>
                <li><pad-translate>Wil je ook dat de bezoeker kan boeken? Plaats dan onder <b>[{{pad-prefix}}-course]</b> de volgende shortcode:</pad-translate> <b>[{{pad-prefix}}-booking-form]</b></li>
                <li><pad-translate>Selecteer de pagina die net is gemaakt bij Planaday -> Cursus instellingen -> Detail -> detail pagina</pad-translate></li>
                <li><pad-translate>Sla de instellingen op</pad-translate></li>
            </ol>
            <p><pad-translate>Je kunt ook nog widgets toevoegen aan je sidebar. Deze toon details van de cursus indien je de cursus bekijkt. Instellingen hiervan doe je in de widget zelf.</pad-translate></p>

            <pad-info-block data-template="warningBlock">
                <h3><pad-translate>Detail pagina naam gewijzigd?</pad-translate></h3>
                <p>
                    <pad-translate>Als de naam van de detail pagina gewijzigd is, dan moet je de verwijzingen opnieuw genereren. Klik dan op de knop hieronder.</pad-translate><br>
                    <pad-translate>Dit hoeft alleen als de naam van de actieve pagina gewijzigd is.</pad-translate>
                </p>
                <pad-form>
                    <pad-action-button data-action="flush-permalinks"><pad-translate>Genereer Verwijzingen</pad-translate></pad-action-button>
                </pad-form>
            </pad-info-block>

            <pad-info-block>
                <h3><pad-translate>Meer informatie?</pad-translate></h3>
                <p>
                    <pad-translate>Meer uitgebreide informatie vind je in onze handleiding. Zie ook <a href="https://planaday.freshdesk.com/support/solutions/articles/11000058859-wordpress-in-website-met-publieke-api" target="_blank">hier</a></pad-translate>
                </p>
            </pad-info-block>

        </div>

        <div id="pad-support-shortcodes-{{pad-uniqueId}}">
            <h2><pad-translate>Uitleg shortcodes en mogelijkheden:</pad-translate></h2>
            <pad-translate>Gebruik onderstaande shortcodes in een pagina om een overzicht te krijgen van cursussen.</pad-translate>

            <h3><pad-translate>Overzicht</pad-translate></h3>
            <p>
                <pad-translate>Er zijn 4 verschillende shortcodes om een overzicht van cursussen te tonen:</pad-translate>
            </p>
            <ul>
                <li>[{{pad-prefix}}-courselistlist start=now end=+4months]</li>
                <li>[{{pad-prefix}}-courselisttable start=now end=+4months]</li>
                <li>[{{pad-prefix}}-courselistblock start=now end=+4months]</li>
                <li>[{{pad-prefix}}-courselistblock2 start=now end=+4months]</li>
            </ul>
            <pad-info-block>
                <h3><pad-translate>Handing om te weten!</pad-translate></h3>
                <pad-translate>Shortcodes kun je uibreiden met: <b>start=now en end=+4months</b>. Je haalt alle cursussen op als je geen templateid of label gebruikt. </pad-translate><br>
                <pad-translate>Gebruik je bijvoorbeeld <b>templatedid=1</b>, dan haal je enkel alle cursussen op van dat cursussoort. </pad-translate><br>
                <pad-translate>Je kunt ook <b>label=bhv</b> gebruiken om bijvoorbeeld alle cursussen op te halen met dat betreffende label!</pad-translate>
                <p>
                    <pad-translate>Bijvoorbeeld:</pad-translate>
                </p>
                <pre>[{{pad-prefix}}-courselistblock start=now end=+4months templateid=1 label=bhv]</pre>
            </pad-info-block>


            <pad-info-block>
                <h3><pad-translate>Andere handige shortcodes: </pad-translate></h3>
                <pad-translate>Deze zijn toepasbaar op iedere pagina. Nummer id=3 verwijst naar cursus 3 in jouw Planaday omgeving: </pad-translate><br>
                <ul>
                    <li>([{{pad-prefix}}-name id=3])<pad-translate> geeft naam van cursus</pad-translate></li>
                    <li>([{{pad-prefix}}-dates id=3])<pad-translate> geeft lijst met datums van dagdelen</pad-translate></li>
                    <li>([{{pad-prefix}}-dates-locations id=3])<pad-translate> geeft lijst met datums van dagdelen inclusief locaties</pad-translate></li>
                    <li>([{{pad-prefix}}-price id=3])<pad-translate> geeft prijs per persoon van cursus</pad-translate></li>
                    <li>([{{pad-prefix}}-price-remark id=3])<pad-translate> geeft opmerkingen bij prijs</pad-translate></li>
                    <li>([{{pad-prefix}}-button id=3])<pad-translate> geeft een button met link naar de juiste cursus</pad-translate></li>
                </ul>
            </pad-info-block>

            <pad-info-block>
                <h3><pad-translate>Template Ids</pad-translate></h3>
                <p>
                    <pad-translate>De volgende nummers kunnen gebruikt worden als "templateid=X": (klik op een templateid filter vak om deze te kopiëren)</pad-translate>
                </p>
                <pad-style data-style="basicTable"/>
                <pad-script data-script="copyThis"/>
                <table class="pad-basic-table pad-striped">
                    <thead>
                        <tr><th><pad-translate>Cursussjabloon</pad-translate></th><th><pad-translate>templateid filter</pad-translate></th></tr>
                    </thead>
                    <tbody>
                        {{pad-templateList}}
                    </tbody>
                </table>
            </pad-info-block>
        </div>

        <div id="pad-style-converter-{{pad-uniqueId}}">
            <pad-css-converter/>
        </div>

        <div id="pad-support-string-{{pad-uniqueId}}">
            <h2><pad-translate>Supportstring</pad-translate></h2>
            <p>
                <pad-translate>Om goed te kunnen helpen bij support op de plugin kunnen we soms vragen om onderstaande string naar ons toe te sturen.</pad-translate>
            </p>
            <p>
                <pad-translate>In deze string staan de instellingen zoals je die gedaan hebt voor je Planaday plugin. (klik op de string om deze te kopiëren)</pad-translate>
            </p>
            <div style="background-color: lightgrey; padding: 1px 20px; border-radius: 5px;">
                <pre class="pad-copy-this" style="cursor:pointer; overflow: scroll; text-wrap: auto; overflow-wrap: break-word">{{pad-supportString}}</pre>
            </div>
        </div>

        <div id="pad-support-sql-{{pad-uniqueId}}">
            <h2><pad-translate>Database Query</pad-translate></h2>
            <p>
                <pad-translate>In het geval dat de plugin niet in staat is om de database aan te maken kan de volgende SQL-query gebruikt worden om de database aan te maken.</pad-translate><br>
                <pad-translate>Klik op de tekst om deze te kopiëren.</pad-translate>
            </p>

            <div class="pad-sql-query" style="background-color: lightgrey; padding: 1px 20px; border-radius: 5px;">
                <pre class="pad-copy-this" style="cursor:pointer; overflow: scroll; text-wrap: auto">{{pad-sqlQuery}}</pre>
                <pad-script data-script="CopyThis"/>
            </div>

            <pad-info-block data-template="warningBlock">
                <h3><pad-translate>Problemen met de database?</pad-translate></h3>
                <p>
                    <pad-translate>Als er problemen zijn met de database dan kan het nodig zijn om deze opnieuw op te bouwen, wij raden aan om dit alleen op instructie van planaday support te doen.</pad-translate>
                </p>
                <pad-form>
                    <pad-action-button data-action="rebuild-pad-databases"><pad-translate>Herbouw databases</pad-translate></pad-action-button>
                </pad-form>
            </pad-info-block>
        </div>
    </div>
</div>