export const demosMarkup = {
    'ema-card': `<ema-card>
    <ema-card-header background="var(--ema-background-light)">
        <span class="ema-card-header-title">Card title</span>
        <span class="ema-card-header-subtitle">Card subtitle</span>
    </ema-card-header>
    <ema-card-content>
        Card content:<br>Lorem ipsum
    </ema-card-content>
    <ema-card-footer>
        <button class="btn btn-primary">Card bottom Action!</button>
    </ema-card-footer>
</ema-card>`,
    'ema-collapsible': `<ema-collapsible label="Collapse" collapsed="false">
    <img src="https://dummyimage.com/214x117.png/cc0000/ffffff">
</ema-collapsible>`,
    'ema-dialog': ` 
<button onClick="document.querySelector('ema-dialog').alert('Your message')">Alert
</button>
<button onClick="document.querySelector('ema-dialog').confirm('Are you sure?')">Confirm
</button>
<button onClick="document.querySelector('ema-dialog').notice('Please, take notice')">Notice
</button>`,
    'ema-debugger': `
<button onClick="document.querySelector('ema-debugger').open()">Show debugger</button>
<p>Or press Control + d to toggle the debugger</p>`,
    'ema-flash-message': ` 
<button onClick="document.querySelector('ema-flash-message').show('Just some message', 'secondary', 3000)">Show message
</button>`,
    'ema-flip': `
<ema-flip flip-events="click" flip-back-events="click" flip-duration="350" flip-timing-function="ease-in-out">
    <div slot="front">
        <img src="https://dummyimage.com/214x117.png/cccccc/ffffff&text=flip+me">
    </div>
    <div slot="back">
        <img src="https://dummyimage.com/214x117.png/cc0000/ffffff&text=flip+me+back">
    </div>
</ema-flip>`,
    'ema-form': `
<ema-form language="nl" 
    data-json='{"title":"","Inhoud":"test inhoud"}'
    definitions-json='{"title":{"constraints":{"presence": true}}}'>
</ema-form>`,
    'ema-iframe': `
<ema-iframe src="https://variations.firebaseapp.com/" width="100%" height="420px"></ema-iframe>`,
    'ema-json-viewer': `
<ema-json-viewer 
    json-url="/assets/collection-manifest.json"
    collapse-at="1">
</ema-json-viewer>`,
    'ema-lazy-img': `
<ema-lazy-img src="https://dummyimage.com/214x214.png/cc0000/ffffff" alt="just an image"></ema-lazy-img>`,
    'ema-layout': `
<ema-layout class={'layout-header-sidebar20-content80-footer'} grid-gap={'5px'}>
    <header>My header</header>
    <aside>Sidebar</aside>
    <article>
        <h6>2 column, header and footer</h6>
        <p>Example content.</p>
    </article>
    <footer>My footer</footer>
</ema-layout>`,
    'ema-loading-spinner': `
<ema-loading-spinner type="ios" color="#495057"></ema-loading-spinner>`,
    'ema-login-form': `
<ema-login-form
    username-label="Gebruikersnaam"
    password-label="Wachtwoord"
    submit-label="Login">
</ema-login-form>
<script>
    var loginForm = document.querySelector('ema-login-form');
    loginForm.addEventListener('loginFormSubmit', function(event) {
        var username = event.detail.username;
        var password = event.detail.password;
        myApiUrl.login(username, password);
    } );
</script>`,
    'ema-modal': `
<ema-modal id="demo-modal" 
    modal-title="Just some modal title"
    modal-content="<h4>Modal content</h4><div>Just some content</div>"
    width="50%" 
    height="50%" 
    center-content="true"
    allow-close="true">
</ema-modal>
<button onClick="document.getElementById('demo-modal').show('<h4>Modal content</h4><div>Just some content</div>')">Show modal
</button>`,
    'ema-permission': `
<div>
    <ema-permission can='["create"]' subject="User" conditions='{}'>
        <button class="create-btn">Create</button>
    </ema-permission>
    <ema-permission can='["read"]' subject="User" conditions='{}'>
        <button class="read-btn">Read</button>
    </ema-permission>
    <ema-permission can='["update"]' subject="User" conditions='{}'>
        <button class="edit-btn">Edit</button>
    </ema-permission>
    <ema-permission can='["delete"]' subject="User" conditions='{}'>
        <button class="delete-btn">Delete</button>
    </ema-permission>
</div>`,
    'ema-slider': `
<ema-slider min="0" max="100" value="50"></ema-slider>`,
    'ema-svg': `
<ema-svg src="../assets/images/splash.svg" data-json='{"title":"my-title"}'></ema-svg>`,
    'ema-tabs': `
<ema-tabs selected-index="3">
    <ema-tab-header slot="header" name="tab-1">Tab 1</ema-tab-header>
    <ema-tab-content slot="content" name="tab-1">
        Tab 1 content
    </ema-tab-content>
    <ema-tab-header slot="header" name="tab-2">Tab 2</ema-tab-header>
    <ema-tab-content slot="content" name="tab-2">
        Tab 2 content
    </ema-tab-content>
    <ema-tab-header slot="header" name="tab-3">Tab 3</ema-tab-header>
    <ema-tab-content slot="content" name="tab-3">
        Tab 3 content
    </ema-tab-content>
</ema-tabs>`,
    'ema-translate': `
<ul>
    <li><ema-translate>PASSWORD</ema-translate></li>
    <li><ema-translate string="PASSWORD"></ema-translate></li>
    <li><ema-translate transform="lowercaseFirst">PASSWORD</ema-translate></li>
    <li><ema-translate params="0">RESULTS_NTH</ema-translate></li>
    <li><ema-translate params="1">RESULTS_NTH</ema-translate></li>
    <li><ema-translate params="2">RESULTS_NTH</ema-translate></li>
    <li><ema-translate params="24">counter</ema-translate></li>
    <li><ema-translate params-json='["2",{ "day": "13", "year": "2014"}]'>DATE_NTH</ema-translate></li>
</ul>`,
};
