#UTILITY Widgets
<ScrollingView@MDScrollView>
  do_scroll_y: True
  do_scroll_x: False

<ScrollArea@MDFloatLayout>
  padding: 20
  size_hint_y: None

<ScrollAreaGrid@MDGridLayout>
  padding: 10
  cols: 1
  size_hint_y: None

<ScrollAreaBox@ScrollAreaGrid>
  MDBoxLayout:
    orientation: "vertical"

<ScrollAreaBoxLayout@ScrollAreaBox>

<HelpDialog>
  text: "Help box"
  text_color: "Black"

<ExpandText>
  text: "Expanded text"
  font_style: "H6"

<ExpandPage>:
  toolbar: toolbar
  text_area: text_area

  MDBoxLayout:
    orientation: "vertical"

    MDTopAppBar:
      id: toolbar
      title: ""
      anchor_title: "right"
      left_action_items: [["arrow-left", lambda x: root.back(app)]]

    MDBoxLayout:
      orientation: "vertical"
      padding: 10

      ScrollingView:
        ScrollArea:
          id: text_area

<SwiperMagicButton>
  opposite_colors: True
  icon_size: 35

<MemoriesSwiper>
  RelativeLayout:
    orientation: "horizontal"

    FitImage:
      source: ""
      radius: [20,]

    MDBoxLayout:
      adaptive_height: True
      orientation: "horizontal"
      pos_hint: {'top': 1}
      spacing: 12
      padding: 10

      MDLabel:
        text: "99"
        font_style: "H5"
        font_size: 20
        size_hint_y: None
        height: self.texture_size[1]
        pos_hint: {"center_y": .5}
        opposite_colors: True

<MemoriesMonth>
  orientation: "vertical"
  spacing: 10

  MDLabel:
    text: "Month placeholder"
    font_style: "H5"
    font_size: 40
    size_hint_y: 0.1

  MDGridLayout:
    size_hint_y: 0.9
    cols: 5
    spacing: 10
    row_default_height: root.get_memories_swiper_height()

<HomeSwiper>
  account_button: account_button
  profile_area: profile_area
  RelativeLayout:
    orientation: "horizontal"

    FitImage:
      id: content
      source: ""
      radius: [20,]
    
    MDBoxLayout:
      adaptive_height: True
      orientation: "horizontal"
      spacing: 12

      MDBoxLayout:
        orientation: "horizontal"
        adaptive_width: True
        adaptive_height: True

        SwiperMagicButton:
          id: like
          icon: "heart-outline"
          on_release:
            root.like()

        MDLabel:
          id: like_number
          text: "0"
          font_style: "H5"
          text_color: "white"
          theme_text_color: "Custom"
          pos_hint: {'center_x': 0.5, 'center_y': 0.5}

      MDBoxLayout:
        adaptive_height: True
        orientation: "horizontal"

        SwiperMagicButton:
          icon: "comment-outline"
          on_release:
            root.switch_to_comments(app)

        MDLabel:
          id: caption
          text: "Caption placeholder"
          adaptive_height: True
          font_style: "H5"
          text_color: "white"
          theme_text_color: "Custom"
          pos_hint: {'center_x': 0.5, 'center_y': 0.5}
 
    MDBoxLayout:
      id: profile_area
      adaptive_height: True
      orientation: "horizontal"
      pos_hint: {'top': 1}
      spacing: "12dp"

      SwiperMagicButton:
        id: account_button
        icon: "account-circle"
        on_release: root.post_options(app)

      MDLabel:
        id: username
        text: "Name Placeholder"
        font_style: "H5"
        size_hint_y: None
        height: self.texture_size[1]
        pos_hint: {"center_y": .5}
        opposite_colors: True

<NoPostLabel>
  MDBoxLayout:
    orientation: "vertical"

    MDLabel:
      text: "No posts :("
      font_style: "H4"
      halign: "center"

<HomeLoadButton>
  padding: 30

  MDRaisedButton:
    size_hint_x: 1
    pos_hint: {"center_x": .5, "center_y": .95}
    text: "Load more"
    on_release:
      root.load_content()

<OccupationPageButton>
  text: "Occupations"
  pos_hint: {'center_x': 0.5}
  on_release: root.switch_to_occupation(app)
  size_hint_x: 0.8

<OrganisationBottomItem>
  occupation_button_area: occupation_button_area
  team_button_area: team_button_area
  name: "Organisation"
  text: "Organisation"
  icon: "account-group"
  on_tab_press: root.page.on_tab_press(self.name)
  
  MDBoxLayout:
    orientation: "vertical"
    padding: 20

    ScrollingView:
      ScrollAreaBoxLayout:
        spacing: 50

        MDBoxLayout:
          id: occupation_button_area

        MDBoxLayout:
          id: team_button_area

          MDRaisedButton:
            text: "Teams"
            pos_hint: {'center_x': 0.5}
            on_release: root.switch_to_team(app)
            size_hint_x: 0.8

<MemoryLayout>
  post_area: post_area
  orientation: "vertical"
  spacing: 10

  MDIconButton:
    icon: "arrow-up"
    on_release: root.day_list.back()

  MDBoxLayout:
    id: post_area
    orientation: "vertical"

<MonthListItem>
  on_release: root.day_view()

<MonthList>
  scroll: scroll
  orientation: "vertical"
  spacing: 10

  MDScrollView:
    do_scroll_x: False
    do_scroll_y: True

    MDList:
      id: scroll

<DayListItem>
  on_release: root.post_open()

<DayList>
  scroll: scroll
  orientation: "vertical"
  spacing: 10

  MDIconButton:
    icon: "arrow-up"
    on_release: root.back()

  MDScrollView:
    do_scroll_x: False
    do_scroll_y: True

    MDList:
      id: scroll

<HomePage>:
  home_swiper_scroll:home_swiper_scroll
  home_swiper_grid:home_swiper_grid
  bottom_navigation: bottom_navigation
  toolbar: toolbar
  root_scroll: root_scroll

  MDBoxLayout:
    orientation: "vertical"

    MDTopAppBar:
      title: "BeOpen"
      id: toolbar
      anchor_title: "left"
      right_action_items: [["help", lambda x: root.open_help(app)], ["cog", lambda x: root.switch_to_settings(app, 'left')]]
      left_action_items: [["account-circle", lambda x: root.switch_to_account(app, direction='right')],["bell", lambda x: root.switch_to_notifications(app, direction='right')]]
      md_bg_color: app.theme_cls.primary_color 

    MDBottomNavigation:
      id: bottom_navigation
      
      MDBottomNavigationItem:
        name: "Home"
        text: "Home"
        icon: "home"
        on_tab_press: root.on_tab_press(self.name)

        MDBoxLayout:
          padding: 20
          size_hint: 1, 1

          MDScrollView:
            id:home_swiper_scroll
            do_scroll_x: False
            do_scroll_y: True

            MDGridLayout:
              id:home_swiper_grid
              cols: 1
              spacing: 10
              adaptive_height: True

      MDBottomNavigationItem:
        name: "Memories"
        text: "Memories"
        icon: "image-multiple"
        on_tab_press: root.on_tab_press(self.name)

        MDBoxLayout:
          padding: 20

          MDBoxLayout:
            id: root_scroll
            orientation: "vertical"

      MDBottomNavigationItem:
        name: "Stats"
        text: "Stats"
        icon: "poll"
        on_tab_press: root.on_tab_press(self.name)

        MDLabel:
          text: "Coming Soon!"
          font_size: "50sp"
          halign: "center"

# Comments Widgets
<Comment>
  like_button: like_button
  profile_button: profile_button
  like_count: like_count
  container: container
  text: ""
  secondary_text: ""
  on_release: root.expand(app)
  on_size:
    self.ids._right_container.width = container.width
    self.ids._right_container.x = container.width

  IconLeftWidget:
    id: profile_button
    icon: "account"
    on_release: root.action_options(app)

  CommentContainer:
    id: container
    adaptive_width: True

    MDIconButton:
      id: like_button
      icon: "heart-outline"
      on_release: root.like()

    MDLabel:
      id: like_count
      text: "3000"
      halign: "right"

<CommentsPage>:
  comment_stack: comment_stack
  comment_field: comment_field

  MDBoxLayout:
    orientation: "vertical"

    MDBoxLayout:
      padding: 10
      size_hint: 1, 0.15
      orientation: "vertical"

      AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'top'

        MDIconButton:
          icon: "menu-up"
          icon_size: "64sp"
          icon_color: app.theme_cls.primary_color
          on_release:
            root.switch_to_home(app)

    MDBoxLayout:
      orientation: "vertical"
      padding: 10
      spacing: 20

      ScrollingView:
        MDList:
          id: comment_stack

      MDRelativeLayout:
        size_hint_y: None
        height: comment_field.height
        pos_hint: {"bottom": 0.5}

        MDTextField:
          id: comment_field
          hint_text: "Enter your comment here..."
          icon_left: "comment"
          mode: "rectangle"

        MDIconButton:
          icon: "send"
          post_hint: {"center_y": 0.5}
          pos: comment_field.width - self.width + dp(8), 0
          on_release: root.submit()

# account widgets
<ProfilePicture>
  size_hint_x: 0.4
  pos_hint: {"center_x": .5}
  source: "data/assets/profile.png"

<InfoChangeBox>
  pos_hint: {"center_y": .5}
  text_field: text_field
  spacing: 10

  MDTextField:
    id: text_field
    hint_text: "Enter a new value"
    on_text_validate: root.save()
    mode: "rectangle"
    size_hint_x: 0.8
    pos_hint: {"center_y": .5}

  MDRaisedButton:
    text: "Save"
    on_release: root.save()
    size_hint_x: 0.2
    pos_hint: {"center_y": .5}

<InfoChangeBoxOld>
  pos_hint: {"center_y": .5}
  hint_text: "Enter a new value"
  mode: "rectangle"
  on_text_validate:
    self.submit_func()

<InfoEditButton>
  icon: "pencil"
  on_release:
    self.change_info()

<BioEditButton>
  icon: "pencil"
  size_hint_x: 0.1
  pos_hint: {"center_y": .5}
  on_release:
    self.change_info()

<ProfileInfo>
  text: ""
  secondary_text: "None"

<UserOccupationChange>
  orientation: "vertical"
  spacing: 20
  occupation_select: occupation_select
  request_title: request_title
  request_occupation: request_occupation
  request_status: request_status
  request_cancel: request_cancel
  request_button: request_button
  occupation_description: occupation_description

  MDBoxLayout:
    id: new_request_area
    orientation: "vertical"

    MDLabel:
      id: new_request_title
      text: "new request"
      font_style: 'H5'
      pos_hint: {'center_x': .5}
      size_hint_y: 0.1

    MDBoxLayout:
      orientation: "horizontal"
      size_hint_y: 0.9
      spacing: 10

      MDRaisedButton:
        id: occupation_select
        text: "Select an occupation"
        pos_hint: {'center_x': .5, 'center_y': .5}
        on_release: root.selection_menu()

      MDLabel:
        id: occupation_description
        text: ""
        font_style: 'H6'
        pos_hint: {'center_x': .5, 'center_y': .5}

      MDRaisedButton:
        id: request_button
        text: "Create request"
        pos_hint: {'center_y': .5}
        on_release: root.submit()

  MDBoxLayout:
    orientation: "horizontal"

    MDBoxLayout:
      orientation: "vertical"
      spacing: 10

      MDLabel:
        id: request_title
        text: "current request"
        font_style: 'H5'
      MDLabel:
        id: request_occupation
        text: ""
        font_style: 'H5'

    MDLabel:
      id: request_status
      text: "Status: No request"
      font_style: 'H6'
      pos_hint: {'right': 1}

    MDRaisedButton:
      id: request_cancel
      text: "Cancel"
      pos_hint: {"center_y": .5}
      on_release: root.cancel()

<ManagementOccupationChange>
  orientation: "vertical"
  spacing: 20
  occupation_select: occupation_select
  occupation_description: occupation_description
  set_button: set_button

  MDBoxLayout:
    orientation: "vertical"

    MDLabel:
      text: "Change occupation"
      font_style: 'H5'
      pos_hint: {'center_x': .5}
      size_hint_y: 0.1

    MDBoxLayout:
      orientation: "horizontal"
      size_hint_y: 0.9
      spacing: 10

      MDRaisedButton:
        id: occupation_select
        text: "Select an occupation"
        pos_hint: {'center_x': .5, 'center_y': .5}
        on_release: root.selection_menu()

      MDLabel:
        id: occupation_description
        text: "Occupation description"
        font_style: 'H6'
        pos_hint: {'center_x': .5, 'center_y': .5}

      MDRaisedButton:
        id: set_button
        text: "Create request"
        pos_hint: {'center_y': .5}
        on_release: root.submit()

<AccountPage>:
  name: 'account_page_screen'

  toolbar: toolbar
  profile_info_view: profile_info_view
  profile_bio_view: profile_bio_view
  biography_content: biography_content
  above_info: above_info

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      id: toolbar
      title: "Profile"
      anchor_title: "center"
      left_action_items: [["account-multiple", lambda x: root.switch_to_friend(app)]]
      right_action_items: [["help", lambda x: root.open_help(app)], ["arrow-right", lambda x: root.back(app, "left")]]
      md_bg_color: app.theme_cls.primary_color 

    MDBoxLayout:
      orientation: "vertical"
      size_hint_y: 0.8

      MDBoxLayout:
        orientation: "vertical"
        size_hint_y: 0.70
        padding: 15
        spacing: 10

        MDBoxLayout:
          id: above_info
          size_hint_y: 0.3

        MDScrollView:
          size_hint_y: 0.45

          MDList:
            id: profile_info_view

        MDBoxLayout:
          size_hint_y: 0.25
          orientation: "vertical"
          spacing: 10

          MDLabel:
            size_hint_y: 0.1
            text: "Biography"
            font_style: "H5"

          MDBoxLayout:
            id: profile_bio_view
            orientation: "horizontal"
            size_hint_y: 0.9

            ScrollView:
              size_hint_x: 0.9
              do_scroll_x: False
              do_scroll_y: True
              
              MDLabel:
                id: biography_content
                size_hint_y: None
                size: self.texture_size
                text: ""
                font_style: "H6"

# Settings widgets
<SettingSwitch>
  setting_title: setting_title
  setting_description: setting_description
  toggle: toggle
  setting_icon: setting_icon

  AnchorLayout:
    anchor_x: 'right'
    anchor_y: 'center'
    padding: 20

    MDBoxLayout:
      orientation: "horizontal"
      adaptive_height: True
      spacing: 20

      MDIcon:
        id: setting_icon
        icon: "language-python"
      
      MDBoxLayout:
        orientation: "vertical"
        spacing: 20

        MDLabel:
          id: setting_title
          text: "switch 1"
          font_size: "30sp"
          text_color: 0, 1, 1, 1

        MDLabel:
          id: setting_description
          text: "description text"
          text_color: 0, 0, 1, 1

    MDSwitch:
      id: toggle
      on_active: root.on_toggle(app)

<SettingTextField>
  setting_title: setting_title
  setting_description: setting_description
  input_field: input_field
  setting_icon: setting_icon

  AnchorLayout:
    anchor_x: 'right'
    anchor_y: 'center'
    padding: 20

    MDBoxLayout:
      orientation: "horizontal"
      adaptive_height: True
      spacing: 20

      MDIcon:
        id: setting_icon
        icon: "language-python"
      
      MDBoxLayout:
        orientation: "vertical"
        spacing: 20

        MDLabel:
          id: setting_title
          text: "switch 1"
          font_size: "30sp"
          text_color: 0, 1, 1, 1

        MDLabel:
          id: setting_description
          text: "description text"
          text_color: 0, 0, 1, 1

    MDTextField:
      id: input_field
      hint_text: "default hint text"
      helper_text_mode: "on_error"
      helper_text: "default helper text"
      on_text_validate: root.submit_func()

<SettingTextFieldOld>
  hint_text: "default hint text"
  helper_text_mode: "on_error"
  helper_text: "default helper text"
  on_text_validate: root.submit_func()

<ShutdownButton>
  text: "Shutdown server"
  size_hint_x: 0.8
  pos_hint: {'center_x': 0.5}
  on_release: root.shutdown(app)

<SettingsPage>:
  settings_stack: settings_stack
  static_buttons: static_buttons
  toolbar: toolbar

  MDBoxLayout:
    orientation: "vertical"

    MDTopAppBar:
      id: toolbar
      title: "Settings"
      anchor_title: "center"
      left_action_items: [["arrow-left", lambda x: root.back(app)]]
      right_action_items: [["help", lambda x: root.open_help(app)]]
      md_bg_color: app.theme_cls.primary_color 

    MDBoxLayout:
      orientation: "vertical"
      padding: 20
      spacing: 10

      MDBoxLayout:
        id: settings_stack
        orientation: "vertical"
        spacing: 10
        
      MDBoxLayout:
        orientation: "vertical"
        spacing: 10
        id: static_buttons

      MDRaisedButton:
        text: "Log out"
        size_hint_x: 0.8
        pos_hint: {'center_x': 0.5}
        on_release: root.logout(app)

# notification widgets
<NotificationItem>
  text: ""
  secondary_text: ""
  on_release:
    root.expand()

  IconRightWidget:
    icon: "close"
    on_release:
      root.delete()

<NotificationsPage>:
  toolbar: toolbar
  notification_layout: notification_layout
  notification_stack: notification_stack

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      id: toolbar
      title: "Notifications"
      anchor_title: "center"
      left_action_items: [["refresh", lambda x: root.load_content()]]
      right_action_items: [["help", lambda x: root.open_help(app)], ["arrow-right", lambda x: root.back(app)]]

    MDBoxLayout:
      id: notification_layout
      orientation: "vertical"
      size_hint_y: 0.9

      MDScrollView:
        size_hint_y: 1
        do_scroll_y: True

        MDList:
          id: notification_stack

# friends widgets
<FriendItem>
  text: "Friend"
  on_release: root.profile(app)

  IconRightWidget:
    icon: "account-remove"
    on_release:
      root.remove()

<FriendPage>:
  toolbar: toolbar
  friend_list: friend_list

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      id: toolbar
      title: "Friends"
      anchor_title: "center"
      left_action_items: [["help", lambda x: root.open_help(app)]]
      right_action_items: [["arrow-right", lambda x: root.switch_to_account(app)]]

    MDBoxLayout:
      orientation: "vertical"

      MDRaisedButton:
        text: "Requests"
        on_release: root.switch_to_friend_request(app)
        size_hint_x: 0.9
        pos_hint: {'center_x': 0.5}

      ScrollingView:
        MDList:
          id: friend_list

<IncomingRequestItem>
  text: "Incoming Request"
  on_release: root.profile(app)

  IconLeftWidget:
    icon: "check"
    on_release:
      root.accept()
  IconRightWidget:
    icon: "close"
    on_release:
      root.reject()

<OutgoingRequestItem>
  text: "Outgoing Request"
  on_release: root.profile(app)

  IconRightWidget:
    icon: "close"
    on_release:
      root.cancel()

<RecomendationItem>
  text: "Recomended friend"
  on_release: root.profile(app)

  IconRightWidget:
    icon: "account-plus"
    on_release:
      root.add_friend()

<FriendRequestPage>:
  toolbar: toolbar
  incoming_requests: incoming_requests
  outgoing_requests: outgoing_requests
  recomendations: recomendations
  username_select: username_select

  MDBoxLayout:
    orientation: "vertical"

    MDTopAppBar:
      id: toolbar
      title: "Requests"
      anchor_title: "center"
      left_action_items: [["refresh", lambda x: root.load_content()]]
      right_action_items: [["arrow-right", lambda x: root.switch_to_friend(app)]]

    MDBoxLayout:
      size_hint_y: 0.1
      orientation: "horizontal"
      spacing: 10
      padding: 10

      MDTextField:
        id: username_select
        mode: "rectangle"
        hint_text: "Enter a username"
        pos_hint: {'center_y': 0.5}

      MDRaisedButton:
        text: "Request"
        on_release: root.add_friend_search()
        pos_hint: {'center_y': 0.5}

    MDBoxLayout:
      orientation: "vertical"
      size_hint_y: 0.2

      MDBoxLayout:
        orientation: "vertical"
        padding: 10
        MDLabel:
          text: "Recomendations"
          font_style: "H5"
          size_hint_y: 0.1

        MDBoxLayout:
          size_hint_y: 0.9
          padding: 10
          ScrollingView:
            MDList:
              id: recomendations

    MDBoxLayout:
      orientation: "vertical"
      padding: 10
      size_hint_y: 0.7

      MDBoxLayout:
        orientation: "vertical"
        MDLabel:
          text: "Incoming Requests"
          font_style: "H5"
          size_hint_y: 0.1

        MDBoxLayout:
          size_hint_y: 0.9
          padding: 10
          ScrollingView:
            MDList:
              id: incoming_requests

      MDBoxLayout:
        orientation: "vertical"
        MDLabel:
          text: "Outgoing Requests"
          font_style: "H5"
          size_hint_y: 0.1

        MDBoxLayout:
          size_hint_y: 0.9
          padding: 10
          ScrollingView:
            MDList:
              id: outgoing_requests

# management widgets
<ManageOccupationChange>
  orientation: "vertical"
  change_button: change_button
  occupation_select: occupation_select
  occupation_description: occupation_description
  username_select: username_select

  MDLabel:
    text: "Change a users occupation (this will change their team)"
    font_style: 'H5'
    pos_hint: {'center_x': .5}
    size_hint_y: 0.1

  MDBoxLayout:
    orientation: "horizontal"
    size_hint_y: 0.9
    
    MDTextField:
      id: username_select
      hint_text: "Enter a username"

    MDRaisedButton:
      id: occupation_select
      text: "Select an occupation"
      pos_hint: {'center_x': .5, 'center_y': .5}
      on_release: root.selection_menu()

    MDLabel:
      id: occupation_description
      text: "Occupation description"
      font_style: 'H6'
      pos_hint: {'center_x': .5, 'center_y': .5}

    MDRaisedButton:
      id: change_button
      text: "Change occupation"
      pos_hint: {'center_y': .5}
      on_release: root.submit()

<OccupationItem>
  text: "Occupation name"
  secondary_text: "Description"

  IconLeftWidget:
    icon: "close"
    on_release:
      root.delete()
  IconRightWidget:
    icon: "pencil"
    on_release:
      root.edit()

<OccupationRequestItem>
  text: "Username"
  secondary_text: "Occupation name"
  tirtiary_text: "Description"

  IconRightWidget:
    icon: "check"
    on_release:
      root.accept()

  IconLeftWidget:
    icon: "close"
    on_release:
      root.reject()

<OccupationEdit>
  orientation: "vertical"
  spacing: 10

  MDLabel:
    text: "Edit occupation"
    font_style: "H5"
    size_hint_y: 0.1
  MDTextField:
    id: name
    mode: "rectangle"
    hint_text: "Name"
    size_hint_x: 1
    size_hint_y: 0.35
  MDTextField:
    id: description
    mode: "rectangle"
    hint_text: "Description"
    size_hint_x: 1
    size_hint_y: 0.35
  MDRaisedButton:
    text: "Done"
    size_hint_x: 1
    on_release: root.submit()
    size_hint_y: 0.2

<OccupationCreate>
  orientation: "vertical"
  spacing: 10

  MDLabel:
    text: "Create an occupation"
    font_style: "H5"
    size_hint_y: 0.1
  MDTextField:
    id: name
    mode: "rectangle"
    hint_text: "Name"
    size_hint_x: 1
    size_hint_y: 0.35
  MDTextField:
    id: description
    mode: "rectangle"
    hint_text: "Description"
    size_hint_x: 1
    size_hint_y: 0.35
  MDRaisedButton:
    text: "Done"
    size_hint_x: 1
    on_release: root.create()
    size_hint_y: 0.2

<OccupationPage>:
  toolbar: toolbar
  occupations: occupations
  edit_area: edit_area

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      id: toolbar
      title: "Occupation"
      anchor_title: "center"
      left_action_items: [["arrow-left", lambda x: root.back(app)]]
      right_action_items: [["help", lambda x: root.open_help(app)]]

    MDRaisedButton:
      text: "Requests"
      on_release: root.switch_to_occupation_request(app)
      size_hint_x: 0.9
      pos_hint: {'center_x': 0.5, 'center_y': 0.5}

    MDBoxLayout:
      id: edit_area
      orientation: "vertical"
      padding: 15

    MDBoxLayout:
      orientation: "vertical"
      padding: 15

      MDLabel:
        text: "Occupations"
        font_style: "H5"
        size_hint_y: 0.1

      MDBoxLayout:
        size_hint_y: 0.9
        padding: 10
        ScrollingView:
          MDList:
            id: occupations

<OccupationRequestPage>:
  toolbar: toolbar
  change_requests: change_requests

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      id: toolbar
      title: "Requests"
      anchor_title: "center"
      left_action_items: [["arrow-left", lambda x: root.back(app)]]
      right_action_items: [["refresh", lambda x: root.load_content()]]

    MDBoxLayout:
      orientation: "vertical"
      padding: 10

      MDLabel:
        text: "Occupation change requests"
        font_style: "H5"
        size_hint_y: 0.1

      MDBoxLayout:
        size_hint_y: 0.9
        padding: 10
        ScrollingView:
          MDList:
            id: change_requests

<LeaderItem>
  IconRightWidget:
    icon: "close"
    on_release: root.delete()

<AddLeaderButton>
  text: "Add leader"
  size_hint_x: 0.8
  on_release: root.add_leader()
  pos_hint: {'center_x': 0.5}

<AddLeader>
  orientation: "vertical"
  spacing: 10

  MDLabel:
    text: "Add a leader"
    font_style: "H5"
    size_hint_y: 0.2
  MDTextField:
    id: username
    mode: "rectangle"
    hint_text: "Name"
    size_hint_y: 0.5
  MDRaisedButton:
    text: "Done"
    on_release: root.submit()
    size_hint_y: 0.3
    size_hint_x: 1

<ChangeNameButton>
  text: "Change team name"
  size_hint_x: 0.8
  on_release: root.change_name()
  pos_hint: {'center_x': 0.5}

<ChangeName>
  orientation: "vertical"
  spacing: 10

  MDLabel:
    text: "Change team name"
    font_style: "H5"
    size_hint_y: 0.2
  MDTextField:
    id: name
    mode: "rectangle"
    hint_text: "Name"
    size_hint_y: 0.5
  MDRaisedButton:
    text: "Done"
    on_release: root.submit()
    size_hint_y: 0.3
    size_hint_x: 1

<TeamPage>:
  toolbar: toolbar
  members: members
  leaders: leaders
  team_name: team_name
  edit_area: edit_area

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      id: toolbar
      title: "Team"
      anchor_title: "center"
      left_action_items: [["arrow-left", lambda x: root.back(app)]]
      right_action_items: [["help", lambda x: root.open_help(app)], ["refresh", lambda x: root.load_content()]]

    MDBoxLayout:
      orientation: "vertical"
      padding: 10
      spacing: 10

      MDBoxLayout:
        orientation: "vertical"

        MDLabel:
          id: team_name
          text: ""
          font_style: "H5"
          font_size: 30
          pos_hint: {'center_x': 0.93}
          size_hint_y: 0.1

        MDBoxLayout:
          id: edit_area
          orientation: "vertical"
          size_hint_y: 0.9
          spacing: 10

      MDBoxLayout:
        orientation: "vertical"
        MDLabel:
          text: "Leader"
          font_style: "H5"
          size_hint_y: 0.1

        MDBoxLayout:
          size_hint_y: 0.9
          padding: 10
          ScrollingView:
            MDList:
              id: leaders

      MDBoxLayout:
        orientation: "vertical"
        MDLabel:
          text: "Members"
          font_style: "H5"
          size_hint_y: 0.1

        MDBoxLayout:
          size_hint_y: 0.9
          padding: 10
          ScrollingView:
            MDList:
              id: members

# auth widgets
<PasswordField>
  size_hint_y: None
  height: password_field.height
  text: password_field.text

  MDTextField:
    id: password_field
    hint_text: "Password"
    text: ""
    password: True
    mode: "rectangle"
    icon_left: "key-variant"

  MDIconButton:
    icon: "eye-off"
    pos_hint: {"center_y": 0.45}
    pos: password_field.width - self.width + dp(8), 0
    theme_text_color: "Hint"
    on_release:
      self.icon = "eye" if self.icon == "eye-off" else "eye-off"
      password_field.password = False if password_field.password is True else True

<AuthField>
  adaptive_height: True
  mode: "rectangle"
  hint_text: ""

<AuthButton>
  text: "auth"
  pos_hint: {'center_x': 0.5}
  size_hint_x: 0.5
  on_release:
    self.action(app)

<LoginPage>:
  login_view: login_view

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      title: "Login"
      anchor_title: "center"

    MDGridLayout:
      id: login_view
      padding: 20
      spacing: 10
      row_default_height: 50
      cols: 1
      rows: 4

<RegisterPage>:
  register_view: register_view

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      title: "Register"
      anchor_title: "center"
      left_action_items: [["arrow-left", lambda x: app.set_screen("LoginPageScreen", "right")]]

    MDGridLayout:
      id: register_view
      padding: 20
      spacing: 10
      row_default_height: 50
      cols: 1
      rows: 6

<ServerPage>:
  url: url
  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      title: "Select Server"
      anchor_title: "center"

    MDGridLayout:
      padding: 20
      spacing: 10
      row_default_height: 50
      cols: 1
      rows: 2

      MDTextField:
        id: url
        adaptive_height: True
        mode: "rectangle"
        hint_text: "Server URL"
        helper_text: "Remember to start with http:// or https://"

      MDRaisedButton:
        text: "Connect"
        pos_hint: {'center_x': 0.5}
        size_hint_x: 0.5
        on_release:
          root.connect(app)

<ShareInput>
  pos_hint: {'center_y': 0.5}
  spacing: 10
  share_num: share_num
  share_secret: share_secret

  MDTextField:
    id: share_num
    mode: "rectangle"
    hint_text: "Share Number"
    size_hint_x: 0.2

  MDTextField:
    id: share_secret
    password: True
    mode: "rectangle"
    hint_text: "Share Secret"
    helper_text: "This is the secret provided by the admin"
    size_hint_x: 0.8

<DecryptPage>:
  input_area: input_area
  en_password: en_password
  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      title: "Decrypt Server Database"
      anchor_title: "center"

    MDBoxLayout:
      orientation: "vertical"
      padding: 20
      spacing: 20
      
      MDTextField:
        id: en_password
        password: True
        mode: "rectangle"
        hint_text: "Master password"
        helper_text: "This can still be used even if Shamir Secret Sharing is enabled"
        size_hint_x: 0.8
        pos_hint: {'center_x': 0.5}

      MDBoxLayout:
        id: input_area
        orientation: "vertical"

      MDRaisedButton:
        text: "Submit"
        pos_hint: {'center_x': 0.5}
        size_hint_x: 0.8
        on_release: root.submit()

<CameraPage>:
  camera_area: camera_area
  toolbar: toolbar

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      id: toolbar
      title: "Time left: "
      anchor_title: "center"
      left_action_items: [["arrow-up", lambda x: root.exit(app)]]
      right_action_items: [["help", lambda x: root.open_help(app)]]

    MDBoxLayout:
      id: camera_area
      orientation: "vertical"
      size_hint_y: 0.7
      padding: 10

    MDBoxLayout:
      orientation: "vertical"
      size_hint_y: 0.2
      padding: 10

      MDIconButton:
        icon: "camera"
        on_release: root.capture(app)
        pos_hint: {'center_x': 0.5, 'center_y': 0.5}

<PostReviewPage>:
  image: image
  caption: caption
  toolbar: toolbar

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10

    MDTopAppBar:
      id: toolbar
      title: "Time left: "
      anchor_title: "center"
      left_action_items: [["arrow-up", lambda x: root.exit(app)]]
      right_action_items: [["help", lambda x: root.open_help(app)]]

    MDBoxLayout:
      orientation: "vertical"
      size_hint_y: 0.1
      padding: 10

      MDRaisedButton:
        text: "Retake photo?"
        on_release: root.retake(app)
        size_hint_x: 1
        pos_hint: {'center_y': 0.5}

    MDBoxLayout:
      id: image_area
      orientation: "vertical"
      size_hint_y: 0.5
      padding: 10

      FitImage:
        id: image
        source: ""

    MDBoxLayout:
      orientation: "vertical"
      size_hint_y: 0.3
      padding: 15
      spacing:10

      MDTextField:
        id: caption
        hint_text: "Caption"
        helper_text: "This text will appear alongside your photo"
        size_hint_x: 1

      MDRaisedButton:
        text: "Post"
        size_hint_x: 1
        on_release: root.post(app)

<FirstTimePage>:
  name_input: name_input
  role_input: role_input

  MDBoxLayout:
    orientation: "vertical"
    spacing: 10
    padding: 20

    MDBoxLayout:
      id: step1
      orientation: "vertical"
      size_hint_y: 0.15

      MDLabel:
        text: "Step 1: Tell us your name"

      MDTextField:
        id: name_input
        hint_text: "Name"

    MDBoxLayout:
      id: step2
      orientation: "vertical"
      size_hint_y: 0.15

      MDLabel:
        text: "Step 2: Let everyone know your role in the organisation"

      MDTextField:
        id: role_input
        hint_text: "Role"

    MDBoxLayout:
      id: step3
      orientation: "vertical"
      size_hint_y: 0.4

      MDLabel:
        text: "Step 3: Request to set your occupation, people with the same occupation will be grouped together into the same team. People in the same team will be able to see eachothers posts"

    MDBoxLayout:
      id: summary
      orientation: "vertical"
      size_hint_y: 0.3

      MDLabel:
        text: "Management or an admin will approve your request soon!\nFor now head over to the friends page and send some friend requests"
      MDLabel:
        text: "To get there click the profile button in the top left hand corner the homepage, and then click the friends button in the top left hand corner on the profile page"

      MDRaisedButton:
        text: "Done"
        size_hint_x: 0.8
        pos_hint: {'center_x': 0.5}
        on_release: root.done(app)