<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:grid="sap.ui.layout.cssgrid"
    xmlns:l="sap.ui.layout"
    xmlns:layout="sap.ui.layout"
    core:require="{
    format: 'sap/mcsuite/model/Format', 
    translate: 'sap/mcsuite/model/Translate', 
    utils: 'sap/mcsuite/model/Utils'
  }"
>
  <CustomListItem>
    <VBox  width="100%">
      <grid:CSSGrid 
          gridTemplateColumns="1fr 10fr 1fr"
          class="mc-item-grid"
      >
          <HBox alignItems="Center" justifyContent="Center">
              <Avatar 
                    visible="{= %{type} === 'CLIENT'}"
                  class='mc-item-avatar'
                  src='sap-icon://fa-light/sitemap'
                  displaySize="S"
                  backgroundColor="Accent6"
              />
              <Avatar 
                    visible="{= %{type} === 'SHOP'}"
                  class='mc-item-avatar'
                  src='sap-icon://fa-light/industry'
                  displaySize="S"
                  backgroundColor="Accent6"
              />
              <Avatar 
                    visible="{= (%{type} === 'GENERAL') || (%{type} === 'ALL')}"
                  class='mc-item-avatar'
                  src='sap-icon://fa-light/user-shield'
                  displaySize="S"
                  backgroundColor="Accent6"
              />
              <Avatar 
                    visible="{= %{type} === 'ROSTER'}"
                  class='mc-item-avatar'
                  src='sap-icon://fa-light/user-group'
                  displaySize="S"
                  backgroundColor="Accent6"
              />
          </HBox>
          <VBox class="mc-item-titles" justifyContent="Center" alignItems="Stretch" >
              <HBox alignItems="Center" justifyContent="Start" class="mc-item-titles-row">
                  <Title text="{_role_id/name}" class='sapUiTinyMarginEnd'/>
              </HBox>
              <grid:CSSGrid 
                  gridTemplateColumns="1fr 1fr"
                  class='mc-item-property-grid'
              >
                    <HBox alignItems="Center">
                        <core:Icon src="sap-icon://fa-light/user"
                            class="sapUiTinyMarginEnd"
                        />
                        <Text text="{_user_id/name}" class="sapUiTinyMarginEnd"/>
                    </HBox>
                    <HBox alignItems="Center" visible="{= ${path: 'type', targetType: 'any'} === 'CLIENT' }">
                        <core:Icon src="sap-icon://fa-light/sitemap"
                            class="sapUiTinyMarginEnd"
                        />
                        <Text text="{_client_id/name}" class="sapUiTinyMarginEnd"/>
                    </HBox>
                    <HBox alignItems="Center" visible="{= ${path: 'type', targetType: 'any'} === 'SHOP' }">
                        <core:Icon src="sap-icon://fa-light/industry"
                            class="sapUiTinyMarginEnd"
                        />
                        <Text text="{= ${_shop_id/sap_number}  + ' - ' + ${_shop_id/name}}" class="sapUiTinyMarginEnd"/>
                    </HBox>
                    <HBox alignItems="Center" visible="{= ${path: 'type', targetType: 'any'} === 'ROSTER' }">
                        <core:Icon src="sap-icon://fa-light/user-group"
                            class="sapUiTinyMarginEnd"
                        />
                        <Text text="{_roster_id/name}" class="sapUiTinyMarginEnd"/>
                    </HBox>
              </grid:CSSGrid>
          </VBox>
          <HBox alignItems="Center" justifyContent="Center">
            <Button
                visible="{= ${path: 'type', targetType: 'any'} === 'CLIENT' }"
                class='mc-items-expandButton'
                icon="sap-icon://fa-light/arrow-up-right-from-square"
                type="Transparent"
                press="taskNav"
            >
                <customData>
                    <core:CustomData key="module" value="clients"/>
                    <core:CustomData key="task" value="clients_show"/>
                    <core:CustomData key="field" value="id"/>
                    <core:CustomData key="value" value="{client_id}"/>
                </customData>
            </Button>
            <Button
                visible="{= ${path: 'type', targetType: 'any'} === 'SHOP' }"
                class='mc-items-expandButton'
                icon="sap-icon://fa-light/arrow-up-right-from-square"
                type="Transparent"
                press="taskNav"
            >
                <customData>
                    <core:CustomData key="module" value="shops"/>
                    <core:CustomData key="task" value="shops_show"/>
                    <core:CustomData key="field" value="id"/>
                    <core:CustomData key="value" value="{shop_id}"/>
                </customData>
            </Button>
            <Button
                visible="{= ${path: 'type', targetType: 'any'} === 'ROSTER' }"
                class='mc-items-expandButton'
                icon="sap-icon://fa-light/arrow-up-right-from-square"
                type="Transparent"
                press="taskNav"
            >
                <customData>
                    <core:CustomData key="module" value="rosters"/>
                    <core:CustomData key="task" value="rosters_show"/>
                    <core:CustomData key="field" value="id"/>
                    <core:CustomData key="value" value="{roster_id}"/>
                </customData>
            </Button>
            <Button 
                class='mc-items-expandButton'
                icon="sap-icon://fa-light/trash"
                type="Transparent"
                press="utils.Items.deleteItem"
            >
                <customData>
                    <core:CustomData key="module" value="users"/>
                    <core:CustomData key="value" value="{id}"/>
                </customData>
            </Button>
              
          </HBox>
      </grid:CSSGrid>
    </VBox>
  </CustomListItem>
</core:FragmentDefinition>
