Files
globelus.pl/admin/templates/globelus-candidates/candidate-preview.php
2024-11-11 15:28:20 +01:00

840 lines
34 KiB
PHP

<?
global $db, $settings;
ob_start();
?>
<div class="row mb15">
<div class="col-xs-12 text-right">
<a href="#" class="btn btn-danger swith-account-type">zmień na konto pracodawcy</a>
</div>
</div>
<? if ( $this -> candidate['auto_create'] ):?>
<div class="row mb15">
<div class="col-xs-12">
<b><u>Profil założony z odpowiedzi na ogłoszenie</u></b>
</div>
</div>
<? endif;?>
<div class="avatar">
<? if ( file_exists( '../' . \front\factory\GlobelusCandidates::avatar_url( $this -> candidate['id'] ) ) ):?>
<img src="/avatar/<?= $this -> candidate['id'];?>/<?= \S::get_token();?>">
<? else:?>
<img src="/images/no-avatar.png">
<? endif;?>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<?= \Html::form_text(
array(
'label' => 'Profil wyróżniony',
'id' => 'highlight',
'text' => $this -> candidate['highlight'] ? '<span class="text-success">tak</span> - ' . $this -> candidate['highlight_to'] : '<span class="text-danger">nie</span><a href="#" class="btn btn-success highlight btn-xs ml10">Włącz wyróżnienie na 2 tygodnie</a>'
)
);?>
</div>
<div class="col-xs-12 col-md-6">
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Profil wypełniony',
'id' => 'profile_completed',
'values' => [ 0 => 'nie', 1 => 'tak' ],
'value' => $this -> candidate['profile_completed'],
'params' => [ 'table' => 'globelus_users', 'column_id' => 'id', 'row_id' => $this -> candidate['id'], 'column' => 'profile_completed', 'operation' => 'update' ]
)
);?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Profil aktywny',
'id' => 'status',
'values' => [ 0 => 'nie', 1 => 'tak' ],
'value' => $this -> candidate['status'],
'params' => [ 'table' => 'globelus_users', 'column_id' => 'id', 'row_id' => $this -> candidate['id'], 'column' => 'status', 'operation' => 'update' ]
)
);?>
</div>
<div class="col-xs-12 col-md-6">
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Profil widoczny',
'id' => 'visible',
'values' => [ 0 => 'nie', 1 => 'tak' ],
'value' => $this -> candidate['visible'],
'params' => [ 'table' => 'globelus_users', 'column_id' => 'id', 'row_id' => $this -> candidate['id'], 'column' => 'visible', 'operation' => 'update' ]
)
);?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<?= \Html::input(
array(
'type' => 'text',
'class' => 'form-edit',
'label' => 'Imię',
'id' => 'name',
'value' => $this -> candidate['name'],
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'name',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
</div>
<div class="col-xs-12 col-md-6">
<?= \Html::input(
array(
'type' => 'text',
'class' => 'form-edit',
'label' => 'Nazwisko',
'id' => 'surname',
'value' => $this -> candidate['surname'],
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'surname',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<?= \Html::form_text(
array(
'label' => 'Email',
'id' => 'email',
'text' => $this -> candidate['email']
)
);?>
</div>
<div class="col-xs-12 col-md-6">
<?= \Html::input(
array(
'type' => 'text',
'class' => 'form-edit',
'label' => 'Telefon',
'id' => 'phone',
'value' => $this -> candidate['phone'],
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'phone',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-6">
<?= \Html::input(
array(
'type' => 'text',
'class' => 'form-edit date-birth',
'label' => 'Data urodzenia',
'id' => 'date_of_birth',
'value' => ( $this -> candidate['date_of_birth'] != '0000-00-00' and $this -> candidate['date_of_birth'] != '' and $this -> candidate['date_of_birth'] != '1970-01-01' ) ? date( 'd.m.Y', strtotime( $this -> candidate['date_of_birth'] ) ) : '',
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'date_of_birth',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
</div>
<div class="col-xs-12 col-md-6">
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Płeć',
'id' => 'sex',
'values' => [ 0 => 'kobieta', 1 => 'mężczyzna' ],
'value' => $this -> candidate['sex'],
'empty' => true,
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'sex',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="col-lg-3 control-label">W jakim zawodzie szuka pracy?:</label>
<div class="col-lg-9">
<div class="form-control-static">
<? if ( is_array( $this -> candidate['positions'] ) ):?>
<? foreach ( $this -> candidate['positions'] as $position ):?>
<div class="mb5">
<select class="form-edit form-control positions" placeholder="wybierz stanowisko" style="max-width: 300px; display: inline-block;" table="globelus_candidates_positions" column_id="id" row_id="<?= $position['id'];?>" column="id_position" operation="update">
<option value="">--- wybierz ---</option>
<? if ( is_array( $this -> positions ) ): foreach ( $this -> positions as $position_single ):?>
<option value="<?= $position_single['id']; ?>" <? if ( $position_single['id'] == $position['id_position'] ):?>selected="selected" <? endif; ?>><?= htmlspecialchars( $position_single['name'] );?></option>
<? endforeach; endif;?>
</select>
<?= \Html::select(
array(
'class' => 'form-edit form-control',
'id' => 'experience',
'values' => array_merge( [ '' => '--- wybierz poziom doświadczenia ---' ], \front\factory\Globelus::positions_experience() ),
'value' => $position['experience'],
'params' => [
'style' => 'max-width: 300px; display: inline-block;',
'table' => 'globelus_candidates_positions',
'column_id' => 'id',
'row_id' => $position['id'],
'column' => 'experience',
'operation' => 'update' ]
)
);?>
</div>
<? endforeach;?>
<? endif;?>
<? for ( $i = 0; $i < 5; $i++ ):?>
<div class="mb5">
<select class="form-edit form-control positions" placeholder="wybierz stanowisko" style="max-width: 300px; display: inline-block;" table="globelus_candidates_positions" column_id="id" row_id="" column="id_position" operation="insert_update" values="user_id;<?= $this -> candidate['id'];?>" connect="globelus_candidates_positions_<?= $i;?>1">
<option value="">--- wybierz ---</option>
<? if ( is_array( $this -> positions ) ): foreach ( $this -> positions as $position_single ):?>
<option value="<?= $position_single['id']; ?>"><?= htmlspecialchars( $position_single['name'] );?></option>
<? endforeach; endif;?>
</select>
<?= \Html::select(
array(
'class' => 'form-edit form-control globelus_candidates_positions_' . $i . '1',
'values' => array_merge( [ '' => '--- wybierz poziom doświadczenia ---' ], \front\factory\Globelus::positions_experience() ),
'value' => 0,
'params' => [
'style' => 'max-width: 300px; display: inline-block;',
'table' => 'globelus_candidates_positions',
'column_id' => 'id',
'row_id' => '',
'column' => 'experience',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id'],
'connect' => 'globelus_candidates_positions_' . $i . '0' ]
)
);?>
</div>
<? endfor;?>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Czy posiada doświadczenie?',
'id' => 'inexperience',
'values' => [ 0 => 'tak', 1 => 'nie' ],
'value' => $this -> candidate['inexperience'],
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'inexperience',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
</div>
<div class="col-xs-12">
<div class="form-group">
<label form="languages" class="col-lg-3 control-label">W jakiej branży szuka pracy?</label>
<div class="col-lg-9">
<div class="form-control-static">
<?
if ( is_array( $this -> categories ) ): foreach ( $this -> categories as $category ):
echo '<div class="col-xs-6 col-md-4 col-lg-4">';
echo \Html::input(
array(
'type' => 'checkbox',
'class' => 'form-edit',
'value' => $category['id'],
'checked' => in_array( $category['id'], $this -> candidate['categories'] ) ? true : false,
'params' => [
'style' => 'position: relative; top: 2px; margin-right: 5px;',
'table' => 'globelus_candidates_categories',
'column_id' => 'id',
'row_id' => null,
'values' => 'user_id;' . $this -> candidate['id'] . '|category_id;' . $category['id'],
'operation' => 'insert_delete'
]
)
);
echo $category['name'];
echo '</div>';
endforeach; endif;
?>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label form="languages" class="col-lg-3 control-label">Znajomość języków</label>
<div class="col-lg-9">
<div class="form-control-static">
<? if ( is_array( $this -> candidate['languages'] ) and !empty( $this -> candidate['languages'] ) ):?>
<? foreach ( $this -> candidate['languages'] as $language ):?>
<div class="mb5">
<?= \Html::input(
array(
'type' => 'text',
'class' => 'form-edit form-control',
'value' => $language['language'],
'params' => [
'style' => 'max-width: 300px; display: inline-block; margin-right: 10px;',
'table' => 'globelus_candidates_languages',
'column_id' => 'id',
'row_id' => $language['id'],
'column' => 'language',
'operation' => 'update' ]
)
);?>
<?= \Html::select(
array(
'class' => 'form-edit form-control',
'values' => array_merge( [ '0' => '--- wybierz poziom znajomości języka ---' ], \front\factory\Globelus::languages_experience() ),
'value' => $language['experience'],
'params' => [
'style' => 'max-width: 300px; display: inline-block;',
'table' => 'globelus_candidates_languages',
'column_id' => 'id',
'row_id' => $language['id'],
'column' => 'experience',
'operation' => 'update' ]
)
);?>
</div>
<? endforeach;?>
<? endif;?>
<? for ( $i = 0; $i < 5; $i++ ):?>
<div class="mb5">
<?= \Html::input(
array(
'type' => 'text',
'class' => 'form-edit form-control globelus_candidates_languages_' . $i . '0',
'params' => [
'style' => 'max-width: 300px; display: inline-block; margin-right: 10px;',
'table' => 'globelus_candidates_languages',
'column_id' => 'id',
'row_id' => '',
'column' => 'language',
'values' => 'user_id;' . $this -> candidate['id'],
'operation' => 'insert_update',
'connect' => 'globelus_candidates_languages_' . $i . '1'
]
)
);?>
<?= \Html::select(
array(
'class' => 'form-edit form-control globelus_candidates_languages_' . $i . '1',
'values' => array_merge( [ '0' => '--- wybierz poziom znajomości języka ---' ], \front\factory\Globelus::languages_experience() ),
'value' => 0,
'params' => [
'style' => 'max-width: 300px; display: inline-block;',
'table' => 'globelus_candidates_languages',
'column_id' => 'id',
'row_id' => '',
'column' => 'experience',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id'],
'connect' => 'globelus_candidates_languages_' . $i . '0' ]
)
);?>
</div>
<? endfor;?>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label form="languages" class="col-lg-3 control-label">Kraj w jakim szuka pracy?</label>
<div class="col-lg-9">
<div class="row">
<? $countries = \front\factory\Globelus::countries();
if ( is_array( $countries ) ): foreach ( $countries as $country ):
echo '<div class="col-xs-6 col-md-4 col-lg-2">';
echo \Html::input(
array(
'type' => 'checkbox',
'class' => 'form-edit',
'value' => $country['id'],
'checked' => in_array( $country['id'], $this -> candidate['countries'] ) ? true : false,
'params' => [
'style' => 'position: relative; top: 2px; margin-right: 5px;',
'table' => 'globelus_candidates_countries',
'column_id' => 'id',
'row_id' => null,
'values' => 'user_id;' . $this -> candidate['id'] . '|country_id;' . $country['id'],
'operation' => 'insert_delete'
]
)
);
echo $country['name'];
echo '</div>';
endforeach; endif;
?>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label form="languages" class="col-lg-3 control-label">Województwo w jakim szuka pracy?</label>
<div class="col-lg-9">
<div class="row">
<? $voivodeships = \front\factory\Globelus::get_voivodeships_list();
if ( is_array( $voivodeships ) ): foreach ( $voivodeships as $voivodeship ):
echo '<div class="col-xs-6 col-md-4 col-lg-2">';
echo \Html::input(
array(
'type' => 'checkbox',
'class' => 'form-edit',
'value' => $voivodeship['id'],
'checked' => in_array( $voivodeship['id'], $this -> candidate['voivodeships'] ) ? true : false,
'params' => [
'style' => 'position: relative; top: 2px; margin-right: 5px;',
'table' => 'globelus_candidates_voivodeships',
'column_id' => 'id',
'row_id' => null,
'values' => 'id_user;' . $this -> candidate['id'] . '|id_voivodeship;' . $voivodeship['id'],
'operation' => 'insert_delete'
]
)
);
echo $voivodeship['name'];
echo '</div>';
endforeach; endif;
?>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Dostępność',
'id' => 'status_of_availability',
'values' => \front\factory\Globelus::availability_status(),
'value' => $this -> candidate['status_of_availability'],
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'status_of_availability',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
<?= \Html::input(
array(
'type' => 'text',
'class' => 'form-edit date',
'label' => 'Dostępny od',
'id' => 'date_of_availability',
'value' => $this -> candidate['date_of_availability'] and $this -> candidate['date_of_availability'] != '0000-00-00' ? $this -> candidate['date_of_availability'] : '',
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'date_of_availability',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Doświadczenie w pracy za granicą',
'id' => 'experience_abroad',
'values' => [ 0 => 'nie', 1 => 'tak' ],
'value' => $this -> candidate['experience_abroad'],
'empty' => true,
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'experience_abroad',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Czy potrzebuje zakwaterowania',
'id' => 'accommodation',
'values' => [ 0 => 'nie', 1 => 'tak' ],
'value' => $this -> candidate['accommodation'],
'empty' => true,
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'accommodation',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Czy posiada prawo jazdy',
'id' => 'driving_license',
'values' => [ 0 => 'nie', 1 => 'tak' ],
'value' => $this -> candidate['driving_license'],
'empty' => true,
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'driving_license',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
<?= \Html::select(
array(
'class' => 'form-edit',
'label' => 'Czy dysponuje własnym samochodem',
'id' => 'own_car',
'values' => [ 0 => 'nie', 1 => 'tak' ],
'value' => $this -> candidate['own_car'],
'empty' => true,
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'own_car',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
<?
if ( file_exists( '../' . \front\factory\GlobelusCandidates::cv_url( $this -> candidate['id'] ) ) ):
$cv = '<a href="../../../cv/' . $this -> candidate['id'] . '/' . \S::get_token() . '/" target="_blank">zobacz CV</a>';
endif;
?>
<?= \Html::form_text(
array(
'label' => 'CV',
'id' => 'cv',
'text' => $cv
)
);?>
<hr />
<?= \Html::textarea(
array(
'label' => 'Dodatkowe informacje',
'class' => 'form-edit',
'name' => 'other_information',
'id' => 'other_information',
'value' => $this -> candidate['other_information'],
'inline' => true,
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'other_information',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
<hr />
<?= \Html::textarea(
array(
'label' => 'Notatka od GLOBELUS.pl',
'class' => 'form-edit',
'name' => 'notes',
'id' => 'notes',
'value' => $this -> candidate['notes'],
'inline' => true,
'params' => [
'table' => 'globelus_candidates_data',
'column_id' => 'id',
'row_id' => $this -> candidate['data_id'],
'column' => 'notes',
'operation' => 'insert_update',
'values' => 'user_id;' . $this -> candidate['id']
]
)
);?>
</div>
</form>
</div>
<?
$out = ob_get_clean();
$grid = new \gridEdit;
$grid -> id = 'candidate-preview';
$grid -> gdb_opt = $gdb;
$grid -> include_plugins = true;
$grid -> title = 'Podgląd kandydata';
$grid -> actions = [
'cancel' => [ 'url' => '/admin/globelus_candidates/main_view/' ]
];
$grid -> external_code = $out;
$grid -> persist_edit = true;
$grid -> id_param = 'id';
echo $grid -> draw();
?>
<script type="text/javascript" src="/libraries/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/libraries/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
var old_data = [];
$( function()
{
$( 'input[type="text"].date-birth' ).datetimepicker({
format: "DD.MM.YYYY",
pickTime: false
});
$( '#other_information, #notes' ).ckeditor( {
toolbar : 'MyTool',
height:'350'
});
var editor1 = $('#notes').ckeditorGet();
editor1.on( 'blur', function( evt ) {
var text = evt.editor.getData();
$.ajax(
{
type: 'POST',
cache: false,
url: '/admin/globelus/save_to_db/',
data:
{
table: 'globelus_candidates_data',
column_id: 'user_id',
row_id: '<?= $this -> candidate['id'];?>',
column: 'notes',
operation: 'update',
value: text
},
beforeSend: function()
{
},
success: function( data )
{
}
});
});
var editor = $('#other_information').ckeditorGet();
editor.on( 'blur', function( evt ) {
var text = evt.editor.getData();
$.ajax(
{
type: 'POST',
cache: false,
url: '/admin/globelus/save_to_db/',
data:
{
table: 'globelus_candidates_data',
column_id: 'user_id',
row_id: '<?= $this -> candidate['id'];?>',
column: 'other_information',
operation: 'update',
value: text
},
beforeSend: function()
{
},
success: function( data )
{
}
});
});
$( 'body' ).on( 'focus', '.form-edit', function()
{
old_data[ $( this ).attr( 'name' ) ] = $( this ).val();
});
$( 'body' ).on( 'change', '.form-edit', function()
{
var input = $( this );
var table = $( this ).attr( 'table' );
var column_id = $( this ).attr( 'column_id' );
var row_id = $( this ).attr( 'row_id' );
var column = $( this ).attr( 'column' );
var operation = $( this ).attr( 'operation' );
var value = $( this ).val();
var values = $( this ).attr( 'values' );
var connect = $( this ).attr( 'connect' );
if ( input.attr( 'type' ) === 'checkbox' )
{
if ( !input.is( ':checked' ) )
value = null;
}
$.ajax(
{
type: 'POST',
cache: false,
url: '/admin/globelus/save_to_db/',
data:
{
table: table,
column_id: column_id,
row_id: row_id,
column: column,
operation: operation,
value: value,
values: values
},
beforeSend: function()
{
input.attr( 'readonly', 'readonly' );
},
success: function( data )
{
input.removeAttr( 'readonly' );
response = jQuery.parseJSON( data );
if ( response.status !== 'ok' )
{
if ( input.attr( 'type' ) === 'checkbox' )
{
if ( input.is( ':checked' ) === false )
input.prop( 'checked', true );
else
input.prop( 'checked', false );
}
else
input.val( old_data[ input.attr( 'name' ) ] );
}
if ( $.isNumeric( response.id ) )
{
input.attr( 'row_id', response.id );
$( '.' + connect ).attr( 'row_id', response.id );
}
}
});
});
$( 'body' ).on( 'click', '.swith-account-type', function(e) {
e.preventDefault();
$.alert({
title: 'Potwierdź',
icon: 'fa fa-exclamation',
content: 'Na pewno chcesz zmienić typ wybranego konta?',
closeIcon: true,
closeIconClass: 'fa fa-close',
typeAnimated: true,
animation: 'opacity',
columnClass: 'large',
theme: 'modern',
buttons: {
cancel: {
text: 'zamknij',
btnClass: 'btn',
keys: ['enter'],
action: function() {
}
},
confirm: {
text: 'zmień typ konta',
btnClass: 'btn-danger',
keys: ['enter'],
action: function() {
document.location.href = '/admin/globelus_candidates/switch_account_type/id=<?= $this -> candidate['id'];?>';
}
}
}
});
});
$( 'body' ).on( 'click', '.highlight', function()
{
$.prompt( 'Na pewno chcesz wyróżnić wybrany profil?',
{
title: 'Potwierdź?',
submit: function(e,v,m,f)
{
if ( v === true )
{
document.location.href="/admin/globelus_candidates/candidate_highlight/id=<?= $this -> candidate['id'];?>";
}
},
buttons: {
'tak': true,
'nie': false
},
focus: 0
});
});
});
</script>
<style type="text/css">
hr {
margin: 10px 0;
}
#g-edit-save {
display: none;
}
.g-container .panel-body {
position: relative;
}
.avatar {
height: 150px;
width: 150px;
float: right;
padding: 3px;
background: #FFF;
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.2 );
margin-bottom: 15px;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>