props = {
  ".A": {
    "z-index": "2",
    ".B": {
      "font-size": [
        "24px",
        "2em"
      ],
      "^:hover": {
        "opacity": "1"
      }
    },
    "> h1": {
      "padding": "0",
      "@media screen and (min-width: 650px)": {
        "padding": "2em"
      }
    },
    ".C p": {
      "font-size": "14px"
    }
  },
  ".D": {
    "transform": "translate(-2px,1px)",
    "^, h1": {
      "background": "red",
      "span, i": {
        "color": "whitemoke",
        "@keyframes animation-name": {
          "from": {
            "opacity": 0
          },
          "to": {
            "opacity": 1
          }
        }
      }
    }
  }
}
        

<style>
.SlideArea .A {
    z-index : 2;
}
.SlideArea .A .B {
    font-size : 24px;
    font-size : 2em;
}
.SlideArea .A .B:hover {
    opacity : 1;
}
.SlideArea .A > h1 {
    padding : 0;
}
@media screen and (min-width: 650px) {
    .SlideArea .A > h1 {
        padding : 2em;
    }
}
.SlideArea .A .C p {
    font-size : 14px;
}
.SlideArea .D {
    transform : translate(-2px,1px);
}
.SlideArea .D,
.SlideArea .D  h1 {
    background : red;
}
.SlideArea .D span,
.SlideArea .D  i,
.SlideArea .D h1 span,
.SlideArea .D h1  i {
    color : whitemoke;
}
@keyframes animation-name {
    from {
        opacity : 0;
    }
    to {
        opacity : 1;
    }
}
</style>
        

# self is in scope, auto picked, also fmt can be parsed on display
display(self.fmt('%{self.version!r} %{self.xmd_syntax}'))
        

```multicol widthA widthB .class1.class2
Column A
+++
Column B
```
        

print('Hello, I was highlighted from a code block!')
        

self.write(('You can **style**{.error} or **color["teal"]`colorize`** your *content*{: style="color:hotpink;"} and *color["hotpink","yellow"]`text`*. ' 
       'Provide **CSS**{.info} for that using hl`Slides.html("style",...)` or use some of the available styles. '
       'See these **styles**{.success} with `Slides.css_styles` property as below:'))
self.css_styles.display()
c.display()
        

import ipyslides as isd
        

import React, { Component } from "react";
        

s.set_css({
    '--bg1-color': 'linear-gradient(45deg, var(--bg3-color), var(--bg2-color), var(--bg3-color))',
    '.highlight': {'background':'#8984'}
}) 
self.styled('## Layout and Theme Settings', 'info', border='1px solid red').display()
self.doc(self.settings,'Slides', members=True,itself = True).display()
        

def docs(self):
    "Create presentation from docs of IPySlides."
    self.close_view() # Close any previous view to speed up loading 10x faster on average
    self.clear() # Clear previous content
    self.create(range(24)) # Create slides faster

    from ..core import Slides

    self.set_citations({'A': 'Citation A', 'B': 'Citation B'}, mode = 'footnote')
    self.settings.footer(text='IPySlides Documentation', date=None)

    with self.build(0): # Title page
        self.this.set_bg_image(self.get_logo(),0.25, filter='blur(10px)', contain=True)
        self.write(f'## IPySlides {self.version} Documentation\n### Creating slides with IPySlides')
        self.center(self.fmt('''
            alert`Abdul Saboor`sup`1`

            today``
            {.text-small}

            %{logo}

            ::: text-box
                sup`1`My University is somewhere in the middle of nowhere
            ''', logo = self.get_logo("4em"))).display()

    self.build(-1, self.fmt('''
        section`Introduction` 
        ```multicol .block-green
        toc[True]`## Table of contents`
        +++
        ### This is summary of current section
        Oh we can use inline columns || Column A || Column B || here and what not!
        %{btn}
        ```
        ```markdown
         ```multicol .block-green
         toc[True]`## Table of contents`
         +++
         Extra content for current section which is on right
         ```
        ```''', btn = self.draw_button))

    with self.build(-1):
        self.write(['# Main App',self.doc(Slides), '### Jump between slides'])
        self.doc(self.goto_button, 'Slides').display()

    with self.build(-1):
        self.write('## Adding Slides section`Adding Slides and Content`')
        self.write('Besides function below, you can add slides with `%%slide number [-m]` magic as well.\n{.note .info}')
        self.write([self.doc(self.build,'Slides'), self.doc(self.sync_with_file,'Slides')])

    with self.build_():
        self.write('''
            ## Important Methods on Slide
            ::: note-warning
                Use slide handle or `Slides[number,]` to apply these methods becuase index can change on new builds.
        ''')
        self.doc(self[0], members='yoffset set_animation set_bg_image update_display get_source show set_css'.split(), itself = False).display()
        self.css_syntax.display()

    with self.build(-1), self.code.context():
        # self is in scope, auto picked, also fmt can be parsed on display
        display(self.fmt('%{self.version!r} %{self.xmd_syntax}'))

    with self.build(-1):
        self.write('## Adding Content')
        self.write('Besides functions below, you can add content to slides with `%%xmd`,`%xmd` as well.\n{.note .info}')
        self.write([self.styled(self.doc(self.write,'Slides'),'block-green'), self.doc(self.parse,'Slides'),self.doc(self.clip,'Slides')])

    with self.build(-1):
        self.write('## Adding Speaker Notes')
        (skipper := self.goto_button('Skip to Dynamic Content', icon='arrowr')).display()
        self.write([rf'You can use alert`notes\`notes content\`` in markdown.\n{{.note .success}}\n',
                   'This is experimental feature, and may not work as expected.\n{.note-error .error}'])
        self.doc(self.notes,'Slides.notes', members = True, itself = False).display()

    with self.build(-1):
        self.write('## Displaying Source Code')
        self.doc(self.code,'Slides.code', members = True, itself = False).display()

    self.build(-1, 'section`?Layout and color["yellow","black"]`Theme` Settings?` toc`### Contents`')

    with self.build(-1) as s:
        s.set_css({
            '--bg1-color': 'linear-gradient(45deg, var(--bg3-color), var(--bg2-color), var(--bg3-color))',
            '.highlight': {'background':'#8984'}
        }) 
        self.styled('## Layout and Theme Settings', 'info', border='1px solid red').display()
        self.doc(self.settings,'Slides', members=True,itself = True).display()

    with self.build(-1):
        self.write('## Useful Functions for Rich Content section`?Useful Functions for alert`Rich Content`?`')
        self.write("clip[caption='clipboard image']`test.png`", self.code.cast("clip[caption='clipboard image']`test.png`","markdown"))
        self.doc(self.alt,'Slides')
        self.doc(self.clip,'Slides').display()

        members = sorted((
            'AnimationSlider alert block bokeh2html bullets styled fmt color cols details doc '
            'today error zoomable highlight html iframe image frozen notify plt2html '
            'raw rows set_dir sig table textbox suppress_output suppress_stdout svg vspace'
        ).split())
        self.doc(self, 'Slides', members = members, itself = False).display()

    with self.build(-1):
        self.write(r'''
            ## Citations and Sections
            Use syntax alert`cite\`key\`` to add citations which should be already set by hl`Slides.set_citations(data, mode)` method.
            Citations are written on suitable place according to given mode. Number of columns in citations are determined by 
            hl`Slides.settings.layout(..., ncol_refs = int)`. cite`A`

            Add sections in slides to separate content by alert`section\`text\``. Corresponding table of contents
            can be added with alert`toc\`title\``.
        ''')
        self.doc(self, 'Slides', members = ['set_citations'], itself = False).display()

    with self.build(-1):
        skipper.set_target() # Set target for skip button
        self.write('## Dynamic Content')

        with self.capture_content() as cap, self.code.context():
            import time

            @self.ei.interact(auto_update=False, grid_css = dict({'.out-main': dict(height='2em')},background='var(--bg2-color)'), date = False)  # self is Slides here
            def update_time(date): 
                local_time = time.localtime()
                objs = ['Time: {3}:{4}:{5}'.format(*local_time)] # Print time in HH:MM:SS format
                if date:
                    objs.append('Date: {0}/{1}/{2}'.format(*local_time))
                self.cols(*objs).display()

        with self.code.context(returns=True) as c:
            import datetime

            @self.on_load  # self is Slides here
            def push_toast(slide):
                t = datetime.datetime.now()
                time = t.strftime('%H:%M:%S')
                self.notify(f'Notification at {time} form slide {slide.index} and frame {slide.indexf}', timeout=5)

        self.write(self.doc(self.ei.interact,'Slides.ei'), [*cap.outputs, c, self.doc(self.on_load,'Slides')])

    with self.build(-1):
        self.write('## Content Styling')
        with self.code.context(returns = True) as c:
            self.write(('You can **style**{.error} or **color["teal"]`colorize`** your *content*{: style="color:hotpink;"} and *color["hotpink","yellow"]`text`*. ' 
                   'Provide **CSS**{.info} for that using hl`Slides.html("style",...)` or use some of the available styles. '
                   'See these **styles**{.success} with `Slides.css_styles` property as below:'))
            self.css_styles.display()
            c.display()

    s, *_ = self.build(-1, self.fmt('''
    ## Highlighting Code
    [pygments](https://pygments.org/) is used for syntax highlighting cite`A`.
    You can **highlight**{.error} code using `highlight` function cite`B` or within markdown using code blocks enclosed with three backticks:
    ```python
    import ipyslides as isd
    ```
    ```javascript
    import React, { Component } from "react";
    ```
    **s is assigned variable to this slide**: %{s.source}
    ''', self=self))


    with self.build(-1):
        self.write('## Loading from File/Exporting to HTML section`Loading from File/Exporting to HTML`')
        self.write('You can parse and view a markdown file. The output you can save by exporting notebook in other formats.\n{.note .info}')
        self.write([self.doc(attr,'Slides') for attr in (self.sync_with_file,self.demo,self.docs,self.export_html)])

    self.build(-1, 'section`Advanced Functionality` toc`### Contents`')

    with self.build_() as s:
        self.write("## Adding content on frames incrementally yoffset`0`")
        self.frozen(widget := (code := s.get_source()).as_widget()).display()
        self.fsep(stack=True) # frozen in above line get oldest metadata for export
        def highlight_code(slide): widget.value = code.focus_lines(range(slide.indexf + 1)).value
        self.on_load(highlight_code)

        for ws, cols in self.fsep.iter(zip([None, (2,3),None], [(0,1),(2,3),(4,5,6,7)])):
            cols = [self.html('h1', f"{c}",style="background:var(--bg3-color);margin-block:0.05em !important;") for c in cols]
            self.write(*cols, widths=ws)

    with self.build(-1) as s:
        self.write('## Adding User defined Objects/Markdown Extensions')
        self.write(
            self.hold(display, self.html('h3','I will be on main slides',css_class='warning'),
                metadata = {'text/html': '<h3 class="warning">I will be on exported slides</h3>'}
            ), # Can also do 'Slides.serilaizer.get_metadata(obj)' if registered
            s.get_source(), widths = [1,3]
        )
        self.write('If you need to serialize your own or third party objects not serialized by this module, you can use `@Slides.serializer.register` to serialize them to html.\n{.note .info}')
        self.doc(self.serializer,'Slides.serializer', members = True, itself = False).display()
        self.write('**You can also extend markdown syntax** using `markdown extensions`, ([See here](https://python-markdown.github.io/extensions/) and others to install, then use as below):')
        self.doc(self.extender,'Slides.extender', members = True, itself = False).display()

    with self.build(-1):
        self.write(r'''
        ## Focus on what matters
        - There is a zoom button on top bar which enables zooming of certain elements. This can be toggled by `Z` key.
        - Most of supported elements are zoomable by default like images, matplotlib, bokeh, PIL image, altair plotly, dataframe, etc.
        - You can also enable zooming for an object/widget by wrapping it inside \`Slide.zoomable\` function conveniently.
        - You can also enable by manully adding `zoom-self`, `zoom-child` classes to an element. To prevent zooming under as `zoom-child` class, use `no-zoom` class.

        ::: zoom-self block-red
            ### Focus on Me 😎
            - If zoom button is enabled, you can hover here to zoom in this part!
            - You can also zoom in this part by pressing `Z` key while mouse is over this part.
        ''')

    with self.build(-1):
        with self.capture_content() as c:
            with self.code.context():
                import ipywidgets as ipw
                btn = ipw.Button(description='Chevron-Down Icon',icon='chevrond')    
                self.write(btn)

        self.write(['''
            ## SVG Icons
            Icons that apprear on buttons inslides (and their rotations) available to use in your slides as well
            besides standard ipywidgets icons.
            ''', *c.outputs, 'line`200`**Source code of this slide**',self.this.get_source()], 
            self.table([(f'`{k}`', self.icon(k,color='crimson').svg) for k in self.icon.available],headers=['Name','Icon']),
        widths=[2,1])


    with self.build_():
        self.write("""
            # Auto Slide Numbering
            Use alert`-1` as placeholder to update slide number automatically. 

            - In Jupyter notebook, this will be updated to current slide number. 
            - In python file, it stays same.
            - You need to run cell twice if creating slides inside a for loop while using `-1`.
            - Additionally, in python file, you can use `Slides.build_` instead of using `-1`.
        """)

    self.build(-1, lambda s: self.write(['## Presentation Code section`Presentation Code`',self.docs]))
    self.navigate_to(0) # Go to title
    return self