<div class="planaday">
    <if-pad-success-block>
        <pad-info-block>
            {{pad-successMessage}}
        </pad-info-block>
    </if-pad-success-block>
    <h1><pad-translate>Stijl Instellingen</pad-translate></h1>

    <pad-form data-action="" data-name="planaday-style-options">
        <pad-platform-nonce-check data-check-name="{{pad-nonce-name}}"/>
        <p class="submit">
            <button class="button button-primary"><pad-translate>Deze instellingen opslaan</pad-translate></button>
        </p>
        <pad-script data-script="tabs"/>
        <div class="pad-tabs">
            <ul>
                <li><a href="#pad-style-css-{{pad-uniqueId}}"><pad-translate>Globale Stijl</pad-translate></a></li>
            </ul>
            <div id="pad-style-css-{{pad-uniqueId}}">
                <table class="form-table">
                    <tr>
                        <td colspan="2"><h3 style="color: #ca4a1f;"><pad-translate>Jouw kleuren en opmaak</></h3>
                            <p>
                                <pad-translate>Met CSS kun je de opmaak en de kleuren van alle teksten aanpassen.</pad-translate><br>
                                <pad-translate>Vul hieronder de CSS in zodat de teksten, kleuren en opmaak gewijzigd kan worden.</pad-translate><br>
                                <pad-translate>Pas bijvoorbeeld de titel van de cursus aan in oranje:</pad-translate>
                            <pre style="background-color: #fff4f4; width: 90%; border: 1px solid #dddddd; padding: 5px;">
.pad-title, .cursustitel {
  color: #C1121C !important;
}</pre><br>
                            <pad-translate>Pas onderdelen zoals kosten, dagdelen etc aan:</pad-translate>
                            <pre style="background-color: #fff4f4; width: 90%; border: 1px solid #dddddd; padding: 5px;">
.pad-dayparts, .pad-place, .pad-available, .pad-detail-available,
.pad-detail-costs, .pad-detail-amount, .pad-detail-amount, .pad-detail-costs, .pad-detail-available, .pad-detail-garanteed,
.pad-detail-moneygaranteed, .pad-costs, .pad-courseelearning {
  color: #C1121C !important;
}</pre><br>
                            <pad-translate>De button aanpassen:</pad-translate>
                            <pre style="background-color: #fff4f4; width: 90%; border: 1px solid #dddddd; padding: 5px;">
.btn-link {
  background-color: #C1121C !important;
  color: black !important;
}</pre><br>
                            <pad-translate>De velden onder elkaar plaatsen bij bedrijf:</pad-translate>
                            <pre style="background-color: #fff4f4; width: 90%; border: 1px solid #dddddd; padding: 5px;">
.pad-company.pad-toggle-company label {
  display: contents !important;
}</pre>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3 style="color: #ca4a1f;"><pad-translate>Geef hier jouw CSS op</pad-translate></h3>
                            <pad-text-input data-template="textArea" data-classes="pad-css-editor" data-field-name="GLOBAL_CSS" data-value="{{pad-globalCss}}"/>
                            <p class="submit">
                                <button class="button button-primary"><pad-translate>Deze instellingen opslaan</pad-translate></button>
                            </p>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </pad-form>
</div>